to-r

Size: px

Start display at page:

Download "to-r"

さゆりみやまる
9 years ago
Views:

2 to-r

12 We re targeting a 1.0 release within the next few weeks. 1.0

22 IE6

28 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jquery Mobile Sample</title> <link rel="stylesheet" href="jquery.mobile-1.0rc1.min.css"> <script src="jquery min.js"></script> <script src="jquery.mobile-1.0rc1.min.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1"> </head> <body>... </body> </html>

29 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jquery Mobile Sample</title> <link rel="stylesheet" href="jquery.mobile-1.0rc1.min.css"> <script src="jquery min.js"></script> <script src="jquery.mobile-1.0rc1.min.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1"> </head> <body>... </body> </html>

31 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jquery Mobile Sample</title> <link rel="stylesheet" href="jquery.mobile-1.0rc1.min.css"> <script src="jquery min.js"></script> <script src="jquery.mobile-1.0rc1.min.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1"> </head> <body>... </body> </html>

33 <meta name="viewport" content="width=device-width, initial-scale=1">

34 <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1">

35 <body> <div data-role="page" id="index">... </div> <div data-role="page" id="about">... </div> <div data-role="page" id="seminar">... </div> </body>

37 <a href="#seminar"> <div> <h2>seminar</h2> <p>this is block link</p> </div> </a>

38 <body> <div data-role="page" id="index"> <a href="#about">about</a>... </div> <div data-role="page" id="about"> <a href="#index">index</a>... </div> </body>

39 index.html <body> <div data-role="page" id="index"> <a href="detail.html">detail</a> </div> </body> detail.html <body> <div data-role="page" id="index"> <a href="index.html">index</a> </div> </body>

40 <div data-role="page" id="index"> <div data-role="header"> <h1>to-r</h1> </div> <div data-role="content"> <p> </p> </div> <div data-role="footer"> <h4> 2011 to-r</h4> </div> </div>

42 <div data-role="page" id="index" data-theme="b"> <div data-role="header"> <h1>to-r</h1> </div> <div data-role="content"> <p> </p> </div> <div data-role="footer"> <h4> 2011 to-r</h4> </div> </div>

44 data-theme="c" data-theme="d" data-theme="e"

45 <div data-role="page" id="index" data-theme="b"> <div data-role="header" data-theme="b" > <h1>to-r</h1> </div> <div data-role="content"> <p> </p> </div> <div data-role="footer" data-theme="b" > <h4> 2011 to-r</h4> </div> </div>

46 <div data-role="content"> <ul data-role="listview"> <li data-role="list-divider">menu</li> <li><a href="#about"><h3>to-r </h3></a></li> </ul> </div> <li><a href="#seminar"><h3> </h3></a></li> <li><a href="#access"><h3> </h3></a></li> <li><a href="#contact"><h3> </h3></a></li>

48 <div data-role="content"> <ul data-role="listview" data-inset="true"> <li data-role="list-divider">menu</li> <li><a href="#about"><h3>to-r </h3></a></li> </ul> </div> <li><a href="#seminar"><h3> </h3></a></li> <li><a href="#access"><h3> </h3></a></li> <li><a href="#contact"><h3> </h3></a></li>

50 <div data-role="content"> <form action="form.php" method="post"> <div data-role="fieldcontain"> <label for="name"> </label> <input type="text" id="name"> </div> <div data-role="fieldcontain"> <label for="gender"> </label> <select name="gender" id="gender" data-role="slider"> <option value=" "> </option> <option value=" "> </option> </select> </div>

54 <a href="#about" data-transition="slide"> <a href="#about" data-transition="slideup"> <a href="#about" data-transition="slidedown"> <a href="#about" data-transition="pop"> <a href="#about" data-transition="fade"> <a href="#about" data-transition="flip">

60 ( д )

73 <a href="#about" data-transition="none"> <a href="about.html" rel="external">

79 tap vmouseover taphold vmousedown swipe vmousemove swipeleft vmouseup swiperight vclick vmousecancel

84 $('div#access').live('pageshow',function(){ google.maps.event.trigger(map, 'resize'); map.setcenter(mylatlng); });

87 <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1"> <link rel="stylesheet" href=" /> <script src=" <script> $(document).bind("mobileinit", function() { $.mobile.page.prototype.options.addbackbtn = true; }); </script> <script src="

88 <div data-role="header"> <a href="#index" data-rel="back" data-icon="arrow-l"> </a> <h1>to-r</h1> </div>

89 <div data-role="header"> <a href="#index" data-direction="reverse" data-icon="arrow-l">top </a> <h1>to-r</h1> </div>

91 Web

98 <div data-role="page" id="index" data-theme="a"> <div data-role="header" data-theme="a" > <h1>to-r</h1> </div> <div data-role="content"> <p> </p> </div> <div data-role="footer" data-theme="a" > <h4> 2011 to-r</h4> </div> </div>

100 <div data-role="page" id="index" data-theme="f"> <div data-role="header" data-theme="f" > <h1>to-r</h1> </div> <div data-role="content"> <p> </p> </div> <div data-role="footer" data-theme="f" > <h4> 2011 to-r</h4> </div> </div>

101 .ui-bar-f { " border: 1px solid " " #669999; " background: "" " #709f9f; " color: " " " " " #ffffff; " font-weight: bold; " text-shadow: 0-1px 1px #669999; " background-image: -webkit-gradient(linear, left top, left bottom, from(#b4cece), to(#709f9f)); /* Saf4+, Chrome */ " background-image: -webkit-linear-gradient(top, #b4cece, #709f9f); /* Chrome 10+, Saf5.1+ */ " background-image: -moz-linear-gradient(top, #b4cece, #709f9f); /* FF3.6 */ " background-image: -ms-linear-gradient(top, #b4cece, #709f9f); /* IE10 */ " background-image: -o-linear-gradient(top, #b4cece, #709f9f); /* Opera */ " background-image: linear-gradient(top, #b4cece, #709f9f); }

102 .ui-btn-up-f {...}.ui-btn-hover-f {...}.ui-btn-down-f {...}.ui-btn-active {...}

103 .ui-btn-up-f {...}.ui-btn-hover-f {...}.ui-btn-down-f {...}.ui-body-f.ui-btn-active {...}

104 .ui-icon-checkbox-on,.ui-checkbox-on.ui-icon,.ui-radio-on.ui-icon { background-color: #709f9f; }

105 .ui-body-f.ui-icon-checkbox-on,.ui-body-f.ui-checkbox-on.ui-icon,.ui-body-f.ui-radio-on.ui-icon { background-color: #709f9f; }

106

107 <div data-role="content"> <ul data-role="listview" data-inset="true" data-dividertheme="f"> <li data-role="list-divider">menu</li> <li><a href="#about"><h3>to-r </h3></a></li> </ul> </div> <li><a href="#seminar"><h3> </h3></a></li> <li><a href="#access"><h3> </h3></a></li> <li><a href="#contact"><h3> </h3></a></li>

108

109 <div data-role="content"> <ul data-role="listview" data-inset="true" data-dividertheme="f"> <li data-role="list-divider">menu</li> <li data-theme="f"> <a href="#about"><h3>to-r </h3></a> </ul> </div> </li> <li><a href="#seminar"><h3> </h3></a></li> <li><a href="#access"><h3> </h3></a></li> <li><a href="#contact"><h3> </h3></a></li>

110

111

112

113

114

115

116

117 <div data-role="content"> <ul data-role="listview" data-inset="true" data-dividertheme="f"> <li data-role="list-divider">menu</li> <li><a href="#about"><h3>to-r </h3></a></li> </ul> </div> <li><a href="#seminar"><h3> </h3></a></li> <li><a href="#access"><h3> </h3></a></li> <li><a href="#contact"><h3> </h3></a></li>

118 <div data-role="content"> <ul data-role="listview" datainset="true" data-dividertheme="f" class="ui-listview ui-listview-inset ui-corner-all ui-shadow"> ( ) " </ul> </div>

119

120

121

122

123

124

125

126

127

128

129 Could

130

131

132

133

コンピュータサイエンス 1. ウェブの基本

コンピュータサイエンス 1. ウェブの基本 1. Chris Plaintail May 18, 2016 1 / 27 1 2 HTML HTML 3 CSS style 2 / 27 HTML HTML HTML HTML CSS HTML CSS 3 / 27 4 / 27 HTML HTML, CSS HTML, CSS http, https file CSS HTML CSS.html PC file:// PC.html 5 /