-
Notifications
You must be signed in to change notification settings - Fork 93
/
mobile.php
258 lines (223 loc) · 9.93 KB
/
mobile.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile基本页面结构</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
</head>
<body>
<script type="text/javascript">
$( function() {
$('body').bind( 'taphold', function( e ) {
alert( 'You tapped and held!' );
e.stopImmediatePropagation();
return false;
} );
$('body').bind( 'swipe', function( e ) {
alert( 'You swiped!' );
e.stopImmediatePropagation();
return false;
} );
} );
</script>
<!-- <div data-role="page" id="home">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content">
<p>页面中的内容都是包装在div标签中并在标签中加入data-role=”page”属性。 这样jQuery Mobile就会知道哪些内容需要处理。
说明：data-属性是HTML5新推出的很有趣的一个特性，它可以让开发人员添加任意属性到html标签中,只要添加的属性名有“data-”前缀。
在”page”div中，还可以包含”header”， ”content”， ”footer”的div元素,这些元素都是可选的，但至少要包含一个 “content”div。</p>
</div>
<div data-role="footer">
<h4>Footer</h4>
</div>
</div>-->
<!-- Start of first page -->
<div data-role="page" id="menu">
<div data-role="header"><h1>Menu</h1></div><!-- /header -->
<div data-role="content">
<a href="#" data-role="button" data-theme="a">About this app控制前景颜色，背景色和渐变色</a>
<a href="#" data-role="button" data-theme="b">About this app</a>
<a href="#" data-role="button" data-theme="c">About this app</a>
<a href="#" data-role="button" data-theme="d">About this app</a>
<a href="#" data-role="button" data-theme="e">About this app</a>
<p>What vehicles do you like?</p>
<p><a href="#Cars">Cars</a></p>
<p><a href="#Trains">Trains</a></p>
<p><a href="#Planes">Planes</a></p>
<a href="http://www.lampweb.org" rel="external">不想采用AJAX的方式加载页面，而想以原生的页面加载方式打开一个链接页面</a>
<p><a href="#Cars" data-transition="flip">页面切换效果</a></p>
<a href="#dialogPopUp" data-rel="dialog" data-role="button">当在一个页面中写多个”page”时在以dialog的方式打开一个页面时，不会出现对话框效果</a>
</div><!-- /content -->
<div data-role="footer"><h4>Page Footer</h4></div><!-- /footer -->
</div><!-- /page -->
<div data-role="page" id="Cars">
<div data-role="header">
<h1>Cars</h1>
<ul data-role="listview" style="margin-top: 0;">
<li>
<img src="http://img.freebase.com/api/trans/image_thumb/en/henry_viii_of_england?pad=1&errorid=%2Ffreebase%2Fno_image_png&maxheight=64&mode=fillcropmid&maxwidth=64" />
<h3><a href="index.html">Henry VIII</a></h3>
<p>Reign 37 Years</p>
<a href="#home">Details</a>
</li>
<li>
<img src="http://www.iwise.com/authorIcons/15/King_George%20V_64x64.png" />
<h3><a href="index.html">George V</a></h3>
<p>Reign 25 Years</p>
<a href="#home">Details</a>
</li>
<li>
<img src="http://img.freebase.com/api/trans/image_thumb/en/prince_of_wales_secondary_school?pad=1&errorid=%2Ffreebase%2Fno_image_png&maxheight=64&mode=fillcropmid&maxwidth=64" />
<h3><a href="index.html">Prince of Wales</a></h3>
<p>Reign N/A</p>
<a href="#home">Details</a>
</li>
<li>
<img src="http://www.iwise.com/authorIcons/13846/Elizabeth%20I%20of%20England_64x64.png" />
<h3><a href="index.html">Elizabeth I</a></h3>
<p>Reign 44 Years</p>
<a href="#home">Details</a>
</li>
<li>
<img src="http://www.iwise.com/authorIcons/9098/Elizabeth%20II_64x64.png" />
<h3><a href="index.html">Elizabeth II</a></h3>
<p>Reign Since 1952</p>
<a href="#home">Details</a>
</li>
</ul>
</div><!-- /header -->
<div data-role="content">
<p>We can add a list of cars</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
<!-- Start of third page -->
<div data-role="page" id="Trains">
<div data-role="header">
<h1>Trains</h1>
<div data-role="collapsible" data-state="collapsed">
<h3>可折叠内容的实例</h3>
<p>This app rocks!</p>
</div>
<ul data-role="listview" style="margin-top: 0;">
<li><a href="#nav1">Henry VIII <span class="ui-li-count">Reign 37 Years</span></a></li>
<li><a href="#nav1">George V <span class="ui-li-count">Reign 25 Years</span></a></li>
<li><a href="#nav1">Prince of Wales <span class="ui-li-count">N/A</span></a></li>
<li><a href="#nav1">Elizabeth I <span class="ui-li-count">Reign 44 Years</span></a></li>
<li><a href="#nav1">Elizabeth II<span class="ui-li-count">Reign since 1952</span></a></li>
</ul>
</div><!-- /header -->
<div data-role="content">
<p>We can add a list of trains</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
<!-- Start of fourth page -->
<div data-role="page" id="Planes">
<!-- <div data-role="header">
<h1>Planes</h1>
</div> /header -->
<div data-role="header" data-position="inline">
<a href="cancel.html" data-icon="delete">Cancel</a>
<h1>Edit Contact</h1>
<a href="save.html" data-icon="check">Save</a>
</div>
<div data-role="content">
<p>We can add a list of planes导航条依然是div，而诸如ui-btn-active这个class可以使得你的按钮显示为被选择状态</p>
</div><!-- /content -->
<div data-role="footer">
<div data-role="navbar">
<ul>
<li><a href="#nav1" class="ui-btn-active">One</a></li>
<li><a href="#nav2">Two</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div><!-- /page -->
<div data-role="page" id="nav1">
<div data-role="header">
<h1>Nav Screen 1</h1>
</div><!-- /header -->
<div data-role="content">Screen for Navigation One</div><!-- /content -->
<div data-role="footer">
<h4>Additional Footer information</h4>
</div><!-- /footer -->
</div><!-- /page -->
<div data-role="page" id="nav2">
<div data-role="header">
<h1>Nav Screen 2</h1>
</div><!-- /header -->
<div data-role="content">
Screen for Navigation Two
</div><!-- /content -->
<div data-role="footer">
<h4>Additional Footer information</h4>
</div><!-- /footer -->
</div><!-- /page -->
<div data-role="page" id="dialogPopUp">
<div data-role="header">
<h1>Dialog Title</h1>
</div><!-- /header -->
<div data-role="content">
This is a dialog box
</div><!-- /content -->
<div data-role="footer">
<h4>Additional Footer information</h4>
</div><!-- /footer -->
</div><!-- /page -->
<div data-role="header" data-position="fixed">
<h1>可以为footer或者header添加 data-position="fixed"来实现这一点。以下代码会强制footer/header固定在下方/上方</h1>
</div><!-- /header -->
<div data-role="content" >
<ul data-role="listview" data-dividertheme="d" style="margin-top: 0;">
<li data-role="list-divider">Royal Family</li>
<li><a href="#nav1">Henry VIII</a></li>
<li><a href="#nav1">George V</a></li>
<li><a href="#nav1">Prince of Wales</a></li>
<li><a href="#nav1">Elizabeth I</a></li>
<li><a href="#nav1">Elizabeth II</a></li>
<li data-role="list-divider">Prime Miniseters</li>
<li><a href="#nav2">Winston Churchill</a></li>
<li><a href="#nav2">Tony Blare</a></li>
<li><a href="#nav2">David Cameron</a></li>
</ul>
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#nav1" class="ui-btn-active">Royals</a></li>
<li><a href="#nav2">Leaders</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div><!-- /page -->
<div data-role="page" id="nav1" data-position="fixed">
<div data-role="header">
<h1>Royal Family</h1>
</div><!-- /header -->
<div data-role="content">
<p>Members and relatives of the British Royal Family historically represented the monarch in various places throughout the British Empire, sometimes for extended periods as viceroys, or for specific ceremonies or events. Today, they often perform ceremonial and social duties throughout the United Kingdom and abroad on behalf of the UK, but, aside from the monarch, have no constitutional role in the affairs of government. This is the same for the other realms of the Commonwealth though the family there acts on behalf of, is funded by, and represents the sovereign of that particular state, and not the United Kingdom.</P>
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<h4>Royal Family</h4>
</div><!-- /header -->
</div><!-- /page -->
<div data-role="page" id="nav2" data-position="fixed">
<div data-role="header">
<h1>Prime Ministers</h1>
</div><!-- /header -->
<div data-role="content">
The Prime Minister of the United Kingdom of Great Britain and Northern Ireland is the Head of Her Majesty's Government in the United Kingdom. The Prime Minister and Cabinet (consisting of all the most senior ministers, who are government department heads) are collectively accountable for their policies and actions to the Sovereign, to Parliament, to their political party and ultimately to the electorate. The current Prime Minister, David Cameron, was appointed on 11 May 2010.</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<h4>Prime Minister</h4>
</div><!-- /header -->
</div><!-- /page -->
</body>
</html>