官网：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
实现多页面间跳转动态效果
时间： 2024-08-06 16:03:04