jQueryMobile（一）

一】、jQuery Mobile 页面

 <!DOCTYPE html>

 <html lang="zh-cn">

 <head>

     <meta charset="UTF-8">

     <!--移动端最基本配置-->

     <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>

     <title></title>

     <!--引入jQuery Mobile样式结构-->

     <link rel="stylesheet" href="jquery_mobile/jquery.mobile-1.4.5.min.css"/>

 </head>

 <body>

 <!--定义一个jQueryMobile页面-->

 <div data-role="page">

     <!--定义jQueryMobile头部-->

     <div data-role="header">

         <h1>欢迎来到我的主页</h1>

     </div>

     <!--定义jQueryMobile主体-->

     <div data-role="main">

         <p>我现在是一个移动端开发者！</p>

     </div>

     <!--定义jQueryMobile底部-->

     <div data-role="footer">

         <h1>底部文本</h1>

     </div>

 </div>

 <!--引入jQuery-->

 <script src="jquery/jquery-1.12.1.min.js"></script>

 <!--引入jQuery.Mobile.js-->

 <script src="jquery_mobile/jquery.mobile-1.4.5.min.js"></script>

 <script src="script.js"></script>

 </body>

 </html>

多个页面以及对话框的跳转：

 <!DOCTYPE html>

 <html lang="zh-cn">

 <head>

     <meta charset="UTF-8">

     <!--移动端最基本配置-->

     <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>

     <title></title>

     <!--引入jQuery Mobile样式结构-->

     <link rel="stylesheet" href="jquery_mobile/jquery.mobile-1.4.5.min.css"/>

 </head>

 <body>

 <!--定义一个jQueryMobile页面-->

 <div data-role="page" id="page1">

     <!--定义jQueryMobile头部-->

     <div data-role="header">

         <h1>欢迎来到我的主页</h1>

     </div>

     <!--定义jQueryMobile主体-->

     <div data-role="main">

         <p>我现在是一个移动端开发者！</p>

         <a href="#page2">点击跳转到第二个页面</a>

         <a href="#page3">弹出对话框</a>

     </div>

     <!--定义jQueryMobile底部-->

     <div data-role="footer">

         <h1>底部文本</h1>

     </div>

 </div>

 <!--定义第二个页面-->

 <div data-role="page" id="page2">

     <!--定义jQueryMobile头部-->

     <div data-role="header">

         <h1>我是第二个页面</h1>

     </div>

     <!--定义jQueryMobile主体-->

     <div data-role="main">

         <p>我现在是一个移动端开发者！</p>

         <a href="#page1">跳回第一个页面</a>

     </div>

     <!--定义jQueryMobile底部-->

     <div data-role="footer">

         <h1>底部文本</h1>

     </div>

 </div>

 <!--定义第三个页面，是一个对话框data-dialog="true" -->

 <div data-role="page" data-dialog="true" id="page3">

     <!--定义jQueryMobile头部-->

     <div data-role="header">

         <h1>我是第二个页面</h1>

     </div>

     <!--定义jQueryMobile主体-->

     <div data-role="main">

         <p>我现在是一个移动端开发者！</p>

         <a href="#page1">跳回第一个页面</a>

     </div>

     <!--定义jQueryMobile底部-->

     <div data-role="footer">

         <h1>底部文本</h1>

     </div>

 </div>

 <!--引入jQuery-->

 <script src="jquery/jquery-1.12.1.min.js"></script>

 <!--引入jQuery.Mobile.js-->

 <script src="jquery_mobile/jquery.mobile-1.4.5.min.js"></script>

 <script src="script.js"></script>

 </body>

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

 <!-- 定义翻页效果，默认是淡入淡出，data-transition -->

 <!--定义一个jQueryMobile页面-->

 <div data-role="page" id="page1">

     <!--定义jQueryMobile头部-->

     <div data-role="header">

         <h1>欢迎来到我的主页</h1>

     </div>

     <!--定义jQueryMobile主体-->

     <!--.ui-content设置默认边距-->

     <div data-role="main" class="ui-content">

         <p>我现在是一个移动端开发者！</p>

         <a href="#page2" data-transition="flip">点击跳转到第二个页面</a>

     </div>

     <!--定义jQueryMobile底部-->

     <div data-role="footer">

         <h1>底部文本</h1>

     </div>

 </div>

 <!--定义第二个页面-->

 <div data-role="page" id="page2">

     <!--定义jQueryMobile头部-->

     <div data-role="header">

         <h1>我是第二个页面</h1>

     </div>

     <!--定义jQueryMobile主体-->

     <div data-role="main" class="ui-content">

         <p>我现在是一个移动端开发者！</p>

         <a href="#page1" data-transition="none">跳回第一个页面</a>

     </div>

     <!--定义jQueryMobile底部-->

     <div data-role="footer">

         <h1>底部文本</h1>

     </div>

 </div>

巴特西

jQueryMobile（一）

最新文章

热门文章