Skip to content

Commit d6321f0

Browse files
itstriveitstrive
committed
reservation jquery mobile
1 parent cef78b2 commit d6321f0

12 files changed

+313
-0
lines changed

‎jquery-mobile-demo/jqmobile.html

+303
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,303 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>jqMobile_Demo_by it老黑</title>
7+
<link rel="stylesheet" href="res/jquery.mobile-1.2.0.min.css" />
8+
<script src="res/jquery-1.8.2.min.js"></script>
9+
<script src="res/jquery.mobile-1.2.0.min.js"></script>
10+
<style>
11+
html,body{ overflow-x:hidden;}
12+
</style>
13+
</head>
14+
15+
<body>
16+
<div data-role="page">
17+
<div data-role="header">
18+
<a href="#" data-icon="refresh" onClick="location.reload()">刷新</a>
19+
<h1>首页</h1>
20+
<a href="#" data-icon="grid" data-iconpos="right">菜单</a>
21+
</div>
22+
<div data-role="content">
23+
<ul data-role="listview">
24+
<li><a href="#page2" data-transition="fade">钓鱼岛新闻（fade）</a></li>
25+
<li><a href="#page2" data-transition="flip">钓鱼岛新闻(flip)</a></li>
26+
<li><a href="#page2" data-transition="pop">钓鱼岛新闻(pop)</a></li>
27+
<li><a href="#page2" data-transition="slide">钓鱼岛新闻(slide)</a></li>
28+
<li><a href="#page2" data-transition="slidedown">钓鱼岛新闻(slidedown)</a></li>
29+
<li><a href="#page2" data-transition="slideup">钓鱼岛新闻(slideup)</a></li>
30+
<li><a href="#page2" data-transition="slidefade">钓鱼岛新闻(slidefade)</a></li>
31+
<li><a href="#page2" data-transition="flow">钓鱼岛新闻(flow)</a></li>
32+
<li><a href="#page2" data-transition="turn">钓鱼岛新闻(turn)</a></li>
33+
<li class="ui-btn-active"><a href="#page2" data-transition="none">钓鱼岛新闻(none)</a></li>
34+
</ul>
35+
</div>
36+
<div data-role="footer" data-position="fixed">
37+
<div data-role="navbar">
38+
<ul>
39+
<li><a href="#formMsg" data-icon="info" data-transition="turn">表单信息</a></li>
40+
<li><a href="#btnGroup" data-icon="custom" data-transition="flow">按钮组</a></li>
41+
<li><a href="#d1" data-icon="star">dialog</a></li>
42+
<li><a href="#list" data-icon="forward" data-transition="slide">列表</a></li>
43+
<li><a href="#layout" data-icon="grid" data-transition="pop">列布局</a></li>
44+
</ul>
45+
</div>
46+
</div>
47+
</div>
48+
49+
<div data-role="page" id="page2">
50+
<div data-role="header">
51+
<a href="#" data-icon="back" data-rel="back">返回</a>
52+
<h1>新闻页面</h1>
53+
</div>
54+
<div data-role="content">
55+
<p style="text-align:center;">
56+
<a href="http://news.baidu.com" target="_blank"><img src="http://news.baidu.com/resource/img/logo_news_137_46.png" alt="百度新闻" /></a>
57+
<p>日本公明党代表山口那津男将自周二起访华，这是安倍新内阁成立后，第一位日本执政党领袖访问中国。山口将携带日本首相安倍晋三给中共中央总书记习近平的亲笔信，意在改善因钓鱼岛问题而恶化的中日关系。访华前，他在东京接受了本台记者的独家专访。</p>
58+
<p>日本联合执政党之一的公明党代表山口那津男访华前在东京的公明党总部接受了凤凰卫视的独家专访。山口代表对因钓鱼岛局势跌入谷底的中日关系现状表示深切忧虑，作为安倍新内阁成立后首位访华的执政党领袖，他主张钓鱼岛问题应当搁置，并尽快恢复两国领导人对话。</p>
59+
<p>日本公明党代表山口那津男：&ldquo;重要的是防止问题升级，预防不测事态，缓和紧张局势。我们要寻求对话窗口，政治家之间的对话非常重要，但日中间政治家对话已经中断。希望访华能从大局角度，成为改善中日关系的一步。&rdquo;</p>
60+
<p>山口这次访华将携带安倍首相亲笔信，期望和中共中央总书记习近平会面，提议早日恢复中日首脑会谈。</p>
61+
<p>记者：&ldquo;安倍首相也希望重开中日首脑会谈吗？&rdquo;</p>
62+
<p>日本公明党代表山口那津男：&ldquo;我认为安倍首相一定有这样的意愿。执政党的重要作用是创造这样的环境。日中要逐渐恢复沟通，最终举行首脑会谈，切实改善两国关系。&rdquo;</p>
63+
<p>对于连日来中国公务船和飞机频繁出现在钓鱼岛附近海域和上空，山口表示极为忧虑，他说为避免不测事态，将向中方提议中日尽快就海上安全联络机制达成共识，同时提议中日双方的军机都不要出现在钓鱼岛上空。</p>
64+
<p>公明党曾为实现1972年中日邦交正常化尽力，2010年中日撞船事件后山口也曾作为首个政党领袖访华，日本各界期待山口这次访华能够找到改善中日关系的突破点。</p>
65+
<p>在中日关系因为钓鱼岛问题而陷入中日邦交正常化40年来最差状态的当前，日本执政党之一的公民党代表访华能否真正推动中日领导人之间的对话，在日本国内也备受关注。</p>
66+
<p>凤凰卫视 李淼、楠濑浩水 日本东京报道
67+
<span class="ifengLogo"><a href="http://www.ifeng.com/" target="_blank"><img src="http://img.ifeng.com/page/Logo.gif" width="15" height="17" /></a></span>
68+
</p>
69+
</p>
70+
</div>
71+
<div data-role="footer" data-position="fixed">
72+
<div data-role="navbar">
73+
<ul>
74+
<li><a href="#formMsg" data-icon="info" data-transition="turn">表单信息</a></li>
75+
<li><a href="#btnGroup" data-icon="custom" data-transition="flow">按钮组</a></li>
76+
<li><a href="#d1" data-icon="star">dialog</a></li>
77+
<li><a href="#list" data-icon="forward" data-transition="slide">列表</a></li>
78+
<li><a href="#layout" data-icon="grid" data-transition="pop">列布局</a></li>
79+
</ul>
80+
</div>
81+
</div>
82+
</div>
83+
84+
<div id="d1" data-role="dialog">
85+
<div data-role="header">
86+
<h1>分享</h1>
87+
</div>
88+
<div data-role="content">
89+
<div data-role="controlgroup">
90+
<a href="#" data-role="button">aaaaaa</a>
91+
<a href="#" data-role="button">bbbbbb</a>
92+
<a href="#" data-role="button">cccccc</a>
93+
<a href="#" data-role="button">dddddd</a>
94+
<a href="#" data-role="button">eeeeee</a>
95+
</div>
96+
</div>
97+
</div>
98+
99+
<div data-role="page" id="formMsg">
100+
<div data-role="header">
101+
<a href="#" data-icon="back" data-rel="back" data-iconpos="notext" data-theme="b">返回</a>
102+
<h2>表单信息</h2>
103+
</div>
104+
<div data-role="content">
105+
<select>
106+
<option>北京</option>
107+
<option>天津</option>
108+
<option>上海</option>
109+
</select>
110+
<input type="search" />
111+
<input type="range" min="0" max="100" step="5" data-highlight='true' />
112+
<select data-role="slider">
113+
<option>开</option>
114+
<option>关</option>
115+
</select>
116+
<textarea></textarea>
117+
118+
<label for="ch1">北京</label><input id="ch1" type="checkbox">
119+
<label for="ch2">上海</label><input id="ch2" type="checkbox">
120+
<label for="ch3">天津</label><input id="ch3" type="checkbox">
121+
122+
<label for="r1">男</label><input id="r1" type="radio" name="sex" />
123+
<label for="r2">女</label><input id="r2" type="radio" name="sex" />
124+
125+
126+
127+
128+
<div data-role="collapsible" data-role="collapsible-set" data-content-theme="b" data-collapsed="false">
129+
<h4>登陆</h4>
130+
<ul data-role="listview">
131+
<li data-role="fieldcontain"><label for="user">用户名:</label><input id="user" type="text" placeholder="用户名" /></li>
132+
<li data-role="fieldcontain"><label for="pass">用户名:</label><input id="pass" type="password" placeholder="密码" /></li>
133+
<li><input type="submit" value="login"/></li>
134+
</ul>
135+
</div>
136+
</div>
137+
<div data-role="footer" style="text-align:center;" data-position="fixed">
138+
<address style="height:30px; line-height:30px; color:#f60; font-size:12px;">by <a href="http://weibo.com/itstrive" target="_blank">it老黑</a> blog:<a href="http://www.itstrive.com" target="_blank">http://www.itstrive.com</a></address>
139+
</div>
140+
</div>
141+
142+
<div data-role="page" id="btnGroup">
143+
<div data-role="header">
144+
<a href="#" data-rel="back" data-icon="back">返回</a>
145+
<h3>按钮组</h3>
146+
</div>
147+
<div data-role="content">
148+
<div data-role="controlgroup" data-type="horizontal">
149+
<a href="#" data-role="button">按钮1</a>
150+
<a href="#" data-role="button">按钮2</a>
151+
<a href="#" data-role="button">按钮3</a>
152+
</div>
153+
154+
<div data-role="controlgroup" data-type="horizontal">
155+
<label for="c1">按钮1</label><input type="checkbox" id="c1" />
156+
<label for="c2">按钮2</label><input type="checkbox" id="c2" />
157+
<label for="c3">按钮3</label><input type="checkbox" id="c3" />
158+
</div>
159+
160+
<div data-role="controlgroup" data-type="horizontal">
161+
<label for="r1">按钮1</label><input type="radio" id="r1" name="btn"/>
162+
<label for="r2">按钮2</label><input type="radio" id="r2" name="btn"/>
163+
<label for="r3">按钮3</label><input type="radio" id="r3" name="btn"/>
164+
</div>
165+
166+
<div data-role="navbar">
167+
<ul>
168+
<li><a href="#" data-role="button">按钮1</a></li>
169+
<li><a href="#" data-role="button">按钮2</a></li>
170+
<li><a href="#" data-role="button">按钮3</a></li>
171+
<li><a href="#" data-role="button">按钮4</a></li>
172+
</ul>
173+
</div>
174+
</div>
175+
<div data-role="footer" style="text-align:center;" data-position="fixed">
176+
<address style="height:30px; line-height:30px; color:#f60; font-size:12px;">by <a href="http://weibo.com/itstrive" target="_blank">it老黑</a> blog:<a href="http://www.itstrive.com" target="_blank">http://www.itstrive.com</a></address>
177+
</div>
178+
</div>
179+
180+
<div id="list" data-role="page">
181+
<div data-role="header">
182+
<a href="#" data-icon="back" data-rel="back">返回</a>
183+
<h4>列表</h4>
184+
</div>
185+
<div data-role="content">
186+
<ul data-role="listview">
187+
<li>
188+
<a href="###">
189+
<img src="res/1.jpg" alt="game" />
190+
<h2>江南style</h2>
191+
<p>《江南style》专辑封面
192+
是一个韩国新词（neologism），指的是首尔江南区富裕时尚、豪华奢靡的生活方式。[1-4]这个词汇被《时代》杂志每周词汇列表列为周三词汇，意为一种与</p>
193+
</a>
194+
</li>
195+
<li>
196+
<a href="###">
197+
<img src="res/2.jpg" alt="game" />
198+
<h2>指的是首尔江南区富裕时尚、豪</h2>
199+
<p>指的是首尔江南区富裕时尚、豪指的是首尔江南区富裕时尚、豪指的是首尔江南区富裕时尚、豪指的是首尔江南区富裕时尚、豪指的是首尔江南区富裕时尚、豪</p>
200+
</a>
201+
</li>
202+
</ul>
203+
204+
<ul data-role="listview" style="margin-top:30px;">
205+
<li data-role="list-divider">A</li>
206+
<li>apple</li>
207+
<li>anthing</li>
208+
<li>abing</li>
209+
<li data-role="list-divider">B</li>
210+
<li>bing</li>
211+
<li>blue</li>
212+
<li>befroe</li>
213+
</ul>
214+
215+
<div data-role="collapsible" data-content-theme="d" style="margin-top:30px;">
216+
<h5>前端</h5>
217+
<ul data-role="listview">
218+
<li>javascript</li>
219+
<li>css</li>
220+
<li>html</li>
221+
</ul>
222+
</div>
223+
224+
<div data-role="collapsible" data-content-theme="d">
225+
<h5>后台</h5>
226+
<ol data-role="listview">
227+
<li>php</li>
228+
<li>java</li>
229+
<li>.net</li>
230+
</ol>
231+
</div>
232+
233+
<div data-role="collapsible-set">
234+
<div data-role="collapsible" data-content-theme="a">
235+
<h2>用户</h2>
236+
<ul data-role="listview">
237+
<li>管理员</li>
238+
<li>普通用户</li>
239+
<li>VIP</li>
240+
</ul>
241+
</div>
242+
<div data-role="collapsible" data-content-theme="c">
243+
<h2>用户</h2>
244+
<ul data-role="listview">
245+
<li>管理员</li>
246+
<li>普通用户</li>
247+
<li>VIP</li>
248+
</ul>
249+
</div>
250+
</div>
251+
</div>
252+
<div data-role="footer" style="text-align:center;" data-position="fixed">
253+
<address style="height:30px; line-height:30px; color:#f60; font-size:12px;">by <a href="http://weibo.com/itstrive" target="_blank">it老黑</a> blog:<a href="http://www.itstrive.com" target="_blank">http://www.itstrive.com</a></address>
254+
</div>
255+
</div>
256+
257+
<div id="layout" data-role="page">
258+
<div data-role="header">
259+
<a href="#" data-rel="back" data-icon="back">返回</a>
260+
<h2>布局</h2>
261+
</div>
262+
<div data-role="content">
263+
<h5>两列布局</h5>
264+
<div class="ui-grid-a">
265+
<div class="ui-block-a" style="border:1px solid #999; text-align:center;">块1</div>
266+
<div class="ui-block-b" style="border:1px solid #999; text-align:center;">块2</div>
267+
</div>
268+
269+
<h5>三列布局</h5>
270+
<div class="ui-grid-b">
271+
<div class="ui-block-a" style="border:1px solid #999; text-align:center;">块1</div>
272+
<div class="ui-block-b" style="border:1px solid #999; text-align:center;">块2</div>
273+
<div class="ui-block-c" style="border:1px solid #999; text-align:center;">块3</div>
274+
</div>
275+
276+
<h5>四列布局</h5>
277+
<div class="ui-grid-c">
278+
<div class="ui-block-a" style="border:1px solid #999; text-align:center;">块1</div>
279+
<div class="ui-block-b" style="border:1px solid #999; text-align:center;">块2</div>
280+
<div class="ui-block-c" style="border:1px solid #999; text-align:center;">块3</div>
281+
<div class="ui-block-d" style="border:1px solid #999; text-align:center;">块3</div>
282+
</div>
283+
284+
<h5>3*3布局</h5>
285+
<div class="ui-grid-b">
286+
<div class="ui-block-a" style="border:1px solid #999; text-align:center;">块1</div>
287+
<div class="ui-block-b" style="border:1px solid #999; text-align:center;">块2</div>
288+
<div class="ui-block-c" style="border:1px solid #999; text-align:center;">块3</div>
289+
<div class="ui-block-a" style="border:1px solid #999; text-align:center;">块1</div>
290+
<div class="ui-block-b" style="border:1px solid #999; text-align:center;">块2</div>
291+
<div class="ui-block-c" style="border:1px solid #999; text-align:center;">块3</div>
292+
<div class="ui-block-a" style="border:1px solid #999; text-align:center;">块1</div>
293+
<div class="ui-block-b" style="border:1px solid #999; text-align:center;">块2</div>
294+
<div class="ui-block-c" style="border:1px solid #999; text-align:center;">块3</div>
295+
</div>
296+
依次类推……
297+
</div>
298+
<div data-role="footer" style="text-align:center;" data-position="fixed">
299+
<address style="height:30px; line-height:30px; color:#f60; font-size:12px;">by <a href="http://weibo.com/itstrive" target="_blank">it老黑</a> blog:<a href="http://www.itstrive.com" target="_blank">http://www.itstrive.com</a></address>
300+
</div>
301+
</div>
302+
</body>
303+
</html>

‎jquery-mobile-demo/res/1.jpg

4.89 KB
Loading

‎jquery-mobile-demo/res/2.jpg

3.5 KB
Loading

‎jquery-mobile-demo/res/images/ajax-loader.gif

7.64 KB
Loading

‎jquery-mobile-demo/res/images/icons-18-black.png

1.73 KB
Loading

‎jquery-mobile-demo/res/images/icons-18-white.png

1.76 KB
Loading

‎jquery-mobile-demo/res/images/icons-36-black.png

3.53 KB
Loading

‎jquery-mobile-demo/res/images/icons-36-white.png

3.56 KB
Loading

‎jquery-mobile-demo/res/jquery-1.8.2.min.js

+2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎jquery-mobile-demo/res/jquery-1.9.0.min.js

+4
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎jquery-mobile-demo/res/jquery.mobile-1.2.0.min.css

+2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎jquery-mobile-demo/res/jquery.mobile-1.2.0.min.js

+2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)