JqueryMobile学习之一---初识jquerymobile(JQM的基本页面结构及页面切换.docx

JqueryMobile学习之一-初识jquerymobile(JQM的基本页面结构及页面切换jQuery Mobile 基本页面结构大部分jQuery Mobile Web应用程序都要遵循下面的基本模板1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253Page TitlePage TitlePage content goes here.Page Footer要使用 jQuery Mobile，首先需要在开发的界面中包含如下3个内容 CSS文件jquery.mobile-1.0a1.min.css jQuery library jquery-1.4.3.min.js jQuery Mobile library jquery.mobile-1.0a1.min.js在上面的页面基本模板中，引入这三个元素采用的是jQuery CDN方式，开发人员也可以下载这些文件及主题到你的服务器上。我们可以看到页面中的内容都是包装在div标签中并在标签中加入data-role=”page”属性。 这样jQuery Mobile就会知道哪些内容需要处理。说明：data-属性是HTML5新推出的很有趣的一个特性，它可以让开发人员添加任意属性到html标签中,只要添加的属性名有“data-”前缀。在”page”div中，还可以包含”header”， ”content”， ”footer”的div元素,这些元素都是可选的，但至少要包含一个 “content”div。在页面的顶部建立导航工具栏，用于放置标题和按钮（典型的至少要放一个“返回”按钮，用于返回前一页）。通过添加额外的属性data-position=”fixed”，可以保证头部始终保持屏幕的顶部包含一些主要内容，例如文本内容，图像，按钮，列表，表单等等在页面的底建立工具栏，添加一些功能按钮为了确保它始终保持在页面的底部，可以给其加上data-position=”fixed” 属性多个页面在同一个页面中有一种建立在一个 HTML页面基础之上的页面结构，即在一个页面中添加多个data-role=”page”。这意味着浏览器仅仅得到一个页面，就可以实现页面平滑切换的客户体验。参看下面实例：(目前有bug) 1 2 3 4 5 6 7 jQuery Mobile: Pages within Pages 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 Home28 29 30 31 32 33 34 35 About this app 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 About This App52 53 54 55 56 57 58 59 This app rocks! Go home 60 61 62 63 64 65 66 67 68 69 70 71 正如所见，上面的代码中包含了两个”page”:主页（id为home）和”about”(id为about)。从Home链接到About页面采用的是连接地址为#about，about页面返回到首页的链接地址为#home。jQuery Mobile会自动切换链接的目的div显示到移动浏览器中。该框架会隐藏除第一个包含data-role=”page”div以外的其它”page”AJAX 导航为了实现在移动设备上的无缝客户体验，jQuery Mobile默认采用AJAX的方式载入一个目的链接页面。因此，当在浏览器中点击一个链接打一个新的页面时，jQuery Mobile接收这个链接，通过AJAX的方式请求链接页面，并把请求得到的内容注入到当前页面的DOM里。另外还需要确保请求的页面url唯一标识的。这样的结果就是用户交互始终保存在同一个页面中。新页面中的内容也会轻松的显示到这个页面里。这种平滑的客户体验相比于传统打开一个新的页面并等待数秒的方式要好很多。当一个新的页面做为新的data-role=”page” div插入到主页面时，主页面会有效的缓存取到的内容。使得当要访问一个页面时能够尽快的显示出来。这个工作过程听起来难以置信的复杂，但是做为开发人员的我们大部份不需要了解其中工作的具体细节。只要能看到效果就OK。注意:如果你不想采用AJAX的方式加载页面，而想以原生的页面加载方式打开一个链接页面，只需要在打开的链接上添加属性 rel=”external”属性页面切换效果你可以使用多种不同的切换效果来显示新页面内容，只需要在链接里添加data-transition属性即可。可能的值如