星空网 > 软件开发 > Java

jquery mobile基本结构搭建(2016.3.9)

官网:http://jquerymobile.com/

基本结构:

jquery mobile基本结构搭建(2016.3.9)

下载安装包后,引入需要的文件,

页面基本结构(单页模板结构)

 1 <!DOCTYPE html> 2 <html> 3 <meta charset="utf-8"> 4 <head> 5 <title>Page Title</title> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <link rel="stylesheet" href="http://code.jquery.com/mobile/[version]/jquery.mobile-[version].min.css" /> 8 <script src='/images/loading.gif' data-original="http://code.jquery.com/jquery-[version].min.js"></script> 9 <script src='/images/loading.gif' data-original="http://code.jquery.com/mobile/[version]/jquery.mobile-[version].min.js"></script>10 </head>11 <body>12 <div data-role="page">13 14   <div data-role="header">15     <h1>Page Title</h1>16   </div><!-- /开头 -->17 18   <div role="main" class="ui-content">19     <p>Page content goes here.</p>20   </div><!-- /内容部分 -->21 22   <div data-role="footer">23     <h4>Page Footer</h4>24   </div><!-- /页脚 -->25 </div><!-- /page -->26 </body>27 </html>

 

页面基本结构(多页模板结构)

一个HTML文档可以包含多个“页面”,加载在一起通过叠加多个div data-role “页面” 。 每个“页面”块需要一个惟一的id( id = " foo " ),将用于内部链接之间的“页面”( href = " # foo” )。 当单击链接,该框架将寻找一个内部与id和过渡到“页面”视图。

这是一个两个“页面”网站由两个jQuery移动div导航链接到一个id放在每一页包装。 请注意,页面上的ids包装只需要支持页面的内部链接,和是可选的,如果每一页是一个单独的HTML文档。 这就是两页内的样子 身体 元素。

 1 <body> 2  3 <!-- Start of first page --> 4 <div data-role="page" id="foo"> 5  6   <div data-role="header"> 7     <h1>Foo</h1> 8   </div><!-- /header --> 9 10   <div role="main" class="ui-content">11     <p>I'm first in the source order so I'm shown as the page.</p>12     <p>View internal page called <a href="#bar">bar</a></p>13   </div><!-- /content -->14 15   <div data-role="footer">16     <h4>Page Footer</h4>17   </div><!-- /footer -->18 </div><!-- /page -->19 20 <!-- Start of second page -->21 <div data-role="page" id="bar">22 23   <div data-role="header">24     <h1>Bar</h1>25   </div><!-- /header -->26 27   <div role="main" class="ui-content">28     <p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>29     <p><a href="#foo">Back to foo</a></p>30   </div><!-- /content -->31 32   <div data-role="footer">33     <h4>Page Footer</h4>34   </div><!-- /footer -->35 </div><!-- /page -->36 </body>

注:基本标签:data-role="page"每个页面包含在此标签内;
1 <div data-role="page">2   ...3 </div>

页面容器结构

 

1 <div data-role="page">2   <div data-role="header">...</div>3   <div role="main" class="ui-content">...</div>4   <div data-role="footer">...</div>5 </div>

 

 

1.页面切换(data-transition)

jquery mobile基本结构搭建(2016.3.9)

地址:http://api.jquerymobile.com/data-attribute/

data-transition     
fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none

 实现多页面间跳转动态效果




原标题:jquery mobile基本结构搭建(2016.3.9)

关键词:jquery

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

美畅国际物流:https://www.goluckyvip.com/tag/37917.html
美辰物流:https://www.goluckyvip.com/tag/37918.html
美刀乐:https://www.goluckyvip.com/tag/37919.html
美迪电商:https://www.goluckyvip.com/tag/37920.html
美迪电商学院:https://www.goluckyvip.com/tag/37921.html
美东fba仓库:https://www.goluckyvip.com/tag/37922.html
​TikTok发生了什么?美区增长首次停滞,准入管理力度加大:https://www.kjdsnews.com/a/1836407.html
2024年如何找到在TikTok上发帖的最佳时间:https://www.kjdsnews.com/a/1836408.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流