你的位置:首页 > Java教程

[Java教程]jquery mobile基本结构搭建(2016.3.9)


官网:http://jquerymobile.com/

基本结构:

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

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

 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="http://code.jquery.com/jquery-[version].min.js"></script> 9 <script src="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)

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

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

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