一】、jQuery Mobile 页面
1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="UTF-8"> 5 <!--移动端最基本配置--> 6 <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/> 7 <title></title> 8 <!--引入jQuery Mobile样式结构--> 9 <link rel="stylesheet" href="jquery_mobile/jquery.mobile-1.4.5.min.css"/> 10 </head> 11 <body> 12 13 <!--定义一个jQueryMobile页面--> 14 <div data-role="page"> 15 <!--定义jQueryMobile头部--> 16 <div data-role="header"> 17 <h1>欢迎来到我的主页</h1> 18 </div> 19 <!--定义jQueryMobile主体--> 20 <div data-role="main"> 21 <p>我现在是一个移动端开发者！</p> 22 </div> 23 <!--定义jQueryMobile底部--> 24 <div data-role="footer"> 25 <h1>底部文本</h1> 26 </div> 27 </div> 28 29 <!--引入jQuery--> 30 <script src="jquery/jquery-1.12.1.min.js"></script> 31 <!--引入jQuery.Mobile.js--> 32 <script src="jquery_mobile/jquery.mobile-1.4.5.min.js"></script> 33 <script src="script.js"></script> 34 35 </body> 36 </html>
多个页面以及对话框的跳转：
1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="UTF-8"> 5 <!--移动端最基本配置--> 6 <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/> 7 <title></title> 8 <!--引入jQuery Mobile样式结构--> 9 <link rel="stylesheet" href="jquery_mobile/jquery.mobile-1.4.5.min.css"/> 10 </head> 11 <body> 12 13 <!--定义一个jQueryMobile页面--> 14 <div data-role="page" id="page1"> 15 <!--定义jQueryMobile头部--> 16 <div data-role="header"> 17 <h1>欢迎来到我的主页</h1> 18 </div> 19 <!--定义jQueryMobile主体--> 20 <div data-role="main"> 21 <p>我现在是一个移动端开发者！</p> 22 <a href="#page2">点击跳转到第二个页面</a> 23 <a href="#page3">弹出对话框</a> 24 </div> 25 <!--定义jQueryMobile底部--> 26 <div data-role="footer"> 27 <h1>底部文本</h1> 28 </div> 29 </div> 30 31 <!--定义第二个页面--> 32 <div data-role="page" id="page2"> 33 <!--定义jQueryMobile头部--> 34 <div data-role="header"> 35 <h1>我是第二个页面</h1> 36 </div> 37 <!--定义jQueryMobile主体--> 38 <div data-role="main"> 39 <p>我现在是一个移动端开发者！</p> 40 <a href="#page1">跳回第一个页面</a> 41 </div> 42 <!--定义jQueryMobile底部--> 43 <div data-role="footer"> 44 <h1>底部文本</h1> 45 </div> 46 </div> 47 48 <!--定义第三个页面，是一个对话框data-dialog="true" --> 49 <div data-role="page" data-dialog="true" id="page3"> 50 <!--定义jQueryMobile头部--> 51 <div data-role="header"> 52 <h1>我是第二个页面</h1> 53 </div> 54 <!--定义jQueryMobile主体--> 55 <div data-role="main"> 56 <p>我现在是一个移动端开发者！</p> 57 <a href="#page1">跳回第一个页面</a> 58 </div> 59 <!--定义jQueryMobile底部--> 60 <div data-role="footer"> 61 <h1>底部文本</h1> 62 </div> 63 </div> 64 65 <!--引入jQuery--> 66 <script src="jquery/jquery-1.12.1.min.js"></script> 67 <!--引入jQuery.Mobile.js--> 68 <script src="jquery_mobile/jquery.mobile-1.4.5.min.js"></script> 69 <script src="script.js"></script> 70 71 </body> 72 </html>
二】、jQuery Mobile 页面切换
比较友好化的几个效果：
1.淡入 data-transition='fade'
2.弹出 data-transition='pop'
3.滑动 data-transition='slide' （不太好）
4.从右到左滑动并淡入 data-transition='slidefade'
5.从上到下滑动 data-transition='slidedown'
6.颠倒返回效果 data-transition="slidedown" data-direction="reverse"
7.没有切换效果 data-transition='none'
从后向前翻转（中心点是y轴）data-transition='flip'
1 <!-- 定义翻页效果，默认是淡入淡出，data-transition --> 2 <!--定义一个jQueryMobile页面--> 3 <div data-role="page" id="page1"> 4 <!--定义jQueryMobile头部--> 5 <div data-role="header"> 6 <h1>欢迎来到我的主页</h1> 7 </div> 8 <!--定义jQueryMobile主体--> 9 <!--.ui-content设置默认边距--> 10 <div data-role="main" class="ui-content"> 11 <p>我现在是一个移动端开发者！</p> 12 <a href="#page2" data-transition="flip">点击跳转到第二个页面</a> 13 </div> 14 <!--定义jQueryMobile底部--> 15 <div data-role="footer"> 16 <h1>底部文本</h1> 17 </div> 18 </div> 19 20 <!--定义第二个页面--> 21 <div data-role="page" id="page2"> 22 <!--定义jQueryMobile头部--> 23 <div data-role="header"> 24 <h1>我是第二个页面</h1> 25 </div> 26 <!--定义jQueryMobile主体--> 27 <div data-role="main" class="ui-content"> 28 <p>我现在是一个移动端开发者！</p> 29 <a href="#page1" data-transition="none">跳回第一个页面</a> 30 </div> 31 <!--定义jQueryMobile底部--> 32 <div data-role="footer"> 33 <h1>底部文本</h1> 34 </div> 35 </div>