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>
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>
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>
