jquery mobile页面切换效果(Flip toggle switch)(注：jQuery移动使用的数据属性的列表。 )...
生活随笔
收集整理的這篇文章主要介紹了
jquery mobile页面切换效果(Flip toggle switch)(注：jQuery移动使用的数据属性的列表。 )...
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1.頁面切換（data-transition）
地址：http://api.jquerymobile.com/data-attribute/
data-transition ?? ?
fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none
褪色 | |翻轉||流流行幻燈片| | | slidedown | slidefade | slideup | |沒有轉
?實現多頁面間跳轉動態效果
示例：
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>Examples</title> 7 <script type="text/javascript" src="../jquery-1.12.0.min.js"></script> 8 <script type="text/javascript" src="../jquery.mobile-1.4.5.min.js"></script> 9 <link href="../jquery.mobile-1.4.5.min.css" rel="stylesheet" type="text/css"> 10 </head> 11 <body> 12 <div data-role="page" id="pagerone"><!-- 此為頁面申明 --> 13 <div data-role="header" data-position="fixed"> 14 <!-- 使頂部和底部始終顯示 data-position="fixed"--> 15 <!-- 單機后頂部和底部消失 --> 16 <h1>頭部</h1> 17 </div> 18 <!-- 頁面切換效果 --> 19 <div role="main" class="ui-content"> 20 <a href="#pagertwo" data-transition="slide">跳轉到第二個頁面</a><!-- data-transition="slider"指定頁面的跳轉效果 --> 21 </div> 22 <div data-role="footer" data-position="fixed"> 23 <h4>這是底部</h4> 24 </div> 25 </div> 26 <div data-role="page" id="pagertwo"><!-- 此為頁面申明 --> 27 <div data-role="header" data-position="fixed"> 28 <!-- 使頂部和底部始終顯示 data-position="fixed"--> 29 <!-- 單機后頂部和底部消失 --> 30 <h1>頭部</h1> 31 </div> 32 <!-- 頁面切換效果 --> 33 <div role="main" class="ui-content"> 34 <a href="#pagerone">跳轉到第一個頁面</a> 35 </div> 36 <div data-role="footer" data-position="fixed"> 37 <h4>這是底部</h4> 38 </div> 39 </div> 40 </body> 41 </html>注：
<a href="#pagertwo" data-transition="slide">跳轉到第二個頁面</a>在a標簽內設定另外一個頁面的鏈接，用data-transition="slide"屬性設定頁面切換的動態效果 data-position="fixed"可以使無論中間多少內容，頂部和底部始終懸浮于窗口上，不消失，單機后消失。
data-position示例： 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>Examples</title> 7 <script type="text/javascript" src="../jquery-1.12.0.min.js"></script> 8 <script type="text/javascript" src="../jquery.mobile-1.4.5.min.js"></script> 9 <link href="../jquery.mobile-1.4.5.min.css" rel="stylesheet" type="text/css"> 10 </head> 11 <body> 12 <div data-role="page"> 13 <div data-role="header" data-position="fixed"> 14 <!-- 使頂部和底部始終顯示 data-position="fixed"--> 15 <!-- 單機后頂部和底部消失 --> 16 <h1>頭部</h1> 17 </div> 18 <div role="main" class="ui-content"> 19 <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p> 20 </div> 21 <div data-role="footer" data-position="fixed"> 22 <h4>這是底部</h4> 23 </div> 24 </div> 25 </body> 26 </html>
注：中間內容大于屏幕高度，則頂部和底部，不隨頁面變化而發生位置改變
轉載于:https://www.cnblogs.com/NB-JDzhou/p/5260594.html
總結
以上是生活随笔為你收集整理的jquery mobile页面切换效果(Flip toggle switch)(注：jQuery移动使用的数据属性的列表。 )...的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Spring学习笔记十二---泛型依赖注
- 下一篇： 使用T-SQL找出执行时间过长的作业