jQuery Mobile 是一个用于创建移动端web应用的的前端框架,jQuery Mobile 是针对触屏智能手机与平板电脑的网页开发框架,jQuery Mobile 工作与所有主流的智能手机和平板电脑上,通过使用jQuery Mobile 可以 "写更少的代码,做更多的事情" : 它可以通过一个灵活及简单的方式来布局网页,且兼容所有移动设备,jQuery Mobile 解决了不同设备兼容的问题,因为它只使用HTML,CSS和 JavaScript,这是所有移动网络浏览器的标准!尽管jQuery Mobile兼容所有的移动设备,但是并不能完全兼容PC机(由于有限的CSS3支持)。
1 <!DOCTYPE html>
2 <html lang="zh-CN">
3 <head>
4 <meta charset="UTF-8">
5 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
6 <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
7 <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
8 <title>jqueryMoblie</title>
9 </head>
10 <body>
11
12 <div data-role="page" id="pageone">
13 <div data-role="header">
14 <h1>图标</h1>
15 </div>
16
17 <div data-role="content">
18 <p>定位图标:</p>
19 <a href="#link" data-role="button" data-icon="search" data-iconpos="top">顶部</a>
20 <a href="#link" data-role="button" data-icon="search" data-iconpos="right">右侧</a>
21 <a href="#link" data-role="button" data-icon="search" data-iconpos="bottom">底部</a>
22 <a href="#link" data-role="button" data-icon="search" data-iconpos="left">左侧</a>
23 </div>
24
25 <div data-role="footer">
26 <h1>底部文本</h1>
27 </div>
28 </div>
29 </body>
30 </html>
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
5 <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
6 <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
7 </head>
8 <body>
9
10 <div data-role="page" id="pageone">
11 <div data-role="header">
12 <h1>可折叠块</h1>
13 </div>
14
15 <div data-role="content">
16 <div data-role="collapsible">
17 <h1>点击我 - 我可以折叠!</h1>
18 <p>我是可折叠的内容。</p>
19 </div>
20 </div>
21
22 <div data-role="footer">
23 <h1>页脚文本</h1>
24 </div>
25 </div>
26
27 </body>
28 </html>
1 <!DOCTYPE html>
2 <html lang="zh_CN">
3 <head>
4 <meta charset="utf-8">
5 <!-- <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.css">
6 <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
7 <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.js"></script> -->
8
9 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
10 <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
11 <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
12 </head>
13 <body>
14
15 <div data-role="page" id="pageone">
16 <div data-role="header">
17 <h1>可折叠集合</h1>
18 </div>
19
20 <div data-role="content">
21 <div data-role="collapsible-set">
22 <div data-role="collapsible">
23 <h3>点击我 - 我可以折叠!</h3>
24 <p>我是可折叠的内容。</p>
25 </div>
26 <div data-role="collapsible">
27 <h3>点击我 - 我可以折叠!</h3>
28 <p>我是可折叠的内容。</p>
29 </div>
30 <div data-role="collapsible">
31 <h3>点击我 - 我可以折叠!</h3>
32 <p>我是可折叠的内容。</p>
33 </div>
34 <div data-role="collapsible">
35 <h3>点击我 - 我可以折叠!</h3>
36 <p>我是可折叠的内容。</p>
37 </div>
38 </div>
39 </div>
40
41 <div data-role="footer">
42 <h1>在此插入底部文本</h1>
43 </div>
44 </div>
45
46 </body>
47 </html>
1 <html lang="zh_CN">
2 <head>
3 <meta charset="utf-8">
4 <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.css">
5 <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
6 <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.js"></script>
7 <style>
8 .ui-block-a,
9 .ui-block-b,
10 .ui-block-c
11 {
12 background-color: lightgray;
13 border: 1px solid black;
14 height: 100px;
15 font-weight: bold;
16 text-align: center;
17 padding: 30px;
18 }
19 </style>
20 </head>
21 <body>
22
23 <div data-role="page" id="pageone">
24 <div data-role="header">
25 <h1>自定义的列</h1>
26 </div>
27
28 <div data-role="content">
29 <p>三列样式布局:</p>
30 <div class="ui-grid-b">
31 <div class="ui-block-a"><span>第一个列</span></div>
32 <div class="ui-block-b"><span>第二个列</span></div>
33 <div class="ui-block-c"><span>第三个列</span></div>
34 </div>
35 </div>
36 </div>
37
38 </body>
39 </html>
1 <!DOCTYPE html>
2 <html lang="zh-CN">
3 <head>
4 <meta charset="utf-8">
5 <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.css">
6 <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
7 <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.js"></script>
8 </head>
9 <body>
10
11 <div data-role="page" id="pageone">
12 <div data-role="content">
13 <h2>有序列表:</h2>
14 <ol data-role="listview">
15 <li><a href="#">列表项</a></li>
16 <li><a href="#">列表项</a></li>
17 <li><a href="#">列表项</a></li>
18 </ol>
19 <h2>无序列表:</h2>
20 <ul data-role="listview">
21 <li><a href="#">列表项</a></li>
22 <li><a href="#">列表项</a></li>
23 <li><a href="#">列表项</a></li>
24 </ul>
25 </div>
26 </div>
27
28 </body>
29 </html>
![](https://images2015.cnblogs.com/blog/616857/201601/616857-20160108151055215-1153607185.png)
1 <!DOCTYPE html>
2 <html lang="zh-CN">
3 <head>
4 <meta charset="utf-8">
5 <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.css">
6 <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
7 <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.js"></script>
8 </head>
9 <body>
10
11 <div data-role="page" id="pageone">
12 <div data-role="content">
13 <h2>列表分隔符</h2>
14 <ul data-role="listview">
15 <li data-role="list-divider">欧洲</li>
16 <li><a href="#">德国</a></li>
17 <li><a href="#">英国</a></li>
18 <li data-role="list-divider">亚洲</li>
19 <li><a href="#">中国</a></li>
20 <li><a href="#">印度</a></li>
21 <li data-role="list-divider">非洲</li>
22 <li><a href="#">埃及</a></li>
23 <li><a href="#">南非</a></li>
24 </ul>
25 </div>
26 </div>
27
28 </body>
29 </html>
![](https://images2015.cnblogs.com/blog/616857/201601/616857-20160108151951996-948515993.png)
1 <!DOCTYPE html>
2 <html lang="zh-CN">
3 <head>
4 <meta charset="utf-8">
5 <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.css">
6 <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
7 <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.js"></script>
8 </head>
9 <body>
10
11 <div data-role="page" id="pageone">
12 <div data-role="header">
13 <a href="#" data-role="button" data-icon="home" data-theme="b">首页</a>
14 <h1>欢迎来到我的主页</h1>
15 <a href="#" data-role="button" data-icon="search" data-theme="e">搜索</a>
16 </div>
17
18 <div data-role="content">
19 <p>此处是内容...</p>
20 </div>
21
22 <div data-role="footer">
23 <a href="#" data-role="button" data-theme="b" data-icon="plus">在Facebook上关注我</a>
24 <a href="#" data-role="button" data-theme="c" data-icon="plus">在Twitter上关注我</a>
25 <a href="#" data-role="button" data-theme="e" data-icon="plus">在Instagram上关注我</a>
26 </div>
27 </div>
28
29 </body>
30 </html>
![](https://images2015.cnblogs.com/blog/616857/201601/616857-20160108153308387-115511206.png)