jQuery Mobile 笔记（1）- jQuery Mobile页面结构

最新推荐文章于 2021-03-09 14:28:23 发布

weixin_30340819

最新推荐文章于 2021-03-09 14:28:23 发布

阅读量139

点赞数

原文链接：http://www.cnblogs.com/dlbrant/archive/2012/04/01/2429196.html

版权

jQuery Mobile页面解构

jQuery Mobile 的“页面”结构不同于传统的html页面，这样做是为了优化single page application的用户体验。

利用jQuery Mobile可以使web应用达到和本地应用同样的用户体验，这是传统web应用无法实现的。

同时如果由于跨域名或者其他原因禁用了Ajax的话，jquery mobile也能平滑的降级为传统的web应用，it just works。

jQuery mobile页面结构

jQuery mobile站点的页面必须以HTML5的doctype开头，即 “<!DOCTYPE html>”（不支持HTML5的浏览器会忽略这个标签）。

然后引入jQuery，jQuery mobile的javascript代码文件以及jquery mobile的css文件。

jQuery工作组建议使用jquery的CDN来获得最佳性能（我访问jquery的网站速度有点慢，不知道这个CDN速度有多快，不过如果网站面向全世界用户，使用CDN应该稍稍提升性能）。

所以，jquery mobile的页面应该都是这样开始的：

Viewport meta 标签

上面的代码里有一个viewport 标签，这个标签是用来指定浏览器对页面显示宽度和缩放等级。如果不设置这个标签，在很多移动设备浏览器中，页面可能会变得很宽，页面元素也会变得很小。给页面加上下面这个标签，页面宽度就会显示为屏幕宽度。

<meta name="viewport" content="width=device-width, initial-scale=1">

加上这个标签后，移动设备的用户能获得最佳的用户体验，同时也不会影响移动设备的缩放功能。

深入body

jQuery mobile展现页面的方式与传统HTML不同，她使用了一些列属性来表示当前的元素代表什么或者如何处理当前的元素，例如jquery mobile的page可以用线面的HTML代码表示：

<div data-role="page">  	... </div>

data-role="page"就表达了当前这个div就是一个页面的语义（与knockout js有近亲关系？）

更多data-attribute请参考这里：http://jquerymobile.com/demos/1.0.1/docs/api/data-attributes.html

在一个“page”里面，还可以添加“header”，“content”，“footer”等等，页面代码可能是下面这个样子：

< div data-role ="page" >
< div data-role ="header" >... </ div >
< div data-role ="content" >... </ div >
< div data-role ="footer" >... </ div > </div>

这样标记页面的好处是更加方便的使用Ajax来load页面，语义上来说，可以通过Ajax把一个完整的jquery mobile “page”在client和server端互传，这样client端和server的程序逻辑能更方便地处理这种语义上的完整页面，同时这个”page“在浏览器看来只是一个HTML片段，所以不会引发整个页面的刷新，从而给用户以更好的rich client app体验。

单页面结构

一个完整的单页面（single page）代码：

<! DOCTYPE html >
< html >
     < head >
     < title >Page Title </ title >

     < meta name ="viewport" content ="width=device-width, initial-scale=1" >

     < link rel ="stylesheet" href ="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
     < script src ="http://code.jquery.com/jquery-1.6.4.min.js" ></ script >
     < script src ="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js" ></ script >
</ head >
< body >

< div data-role ="page" >

     < div data-role ="header" >
         < h1 >Page Title </ h1 >
     </ div > 

     < div data-role ="content" >
         < p >Page content goes here. </ p >
     </ div > 

     < div data-role ="footer" >
         < h4 >Page Footer </ h4 >
     </ div > 
</ div > 

</ body >
</ html >

多页面结构

多页面（multi-page）代码：

一个HTML页面可以包含多个jquery mobile ”page“，但是在页面加载时，只会显示HTML代码中第一个jquery mobile ”page“。不过只要在显示出来的页面上用link指向jquery mobile ”page“ 标签的id，那么在点击这些link的时候jquery mobile会load并显示这些”page“，并且可以指定load页面时的动画效果。

下面这段代码中，id=”foo“ 的页面会在页面加载的时候显示出来，其他”page“这时候看不见，但是foo ”page“包含了一个link（ <a href="#bar">bar</a> ），这个link的href指向隐藏”page“的id，点击这个link的时候jquery mobile就会加载并以指定的动画效果显示出bar ”page“（看起来不错，在很多浏览器上还是有点卡）。

< body >

< div data-role ="page" id ="foo" >

     < div data-role ="header" >
         < h1 >Foo </ h1 >
     </ div > 

     < div data-role ="content" >
         < p >I'm first in the source order so I'm shown as the page. </ p >
         < p >View internal page called < a href ="#bar" >bar </ a ></ p >
     </ div > 

     < div data-role ="footer" >
         < h4 >Page Footer </ h4 >
     </ div > 
</ div > 


< div data-role ="page" id ="bar" >

     < div data-role ="header" >
         < h1 >Bar </ h1 >
     </ div > 

     < div data-role ="content" >
         < 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 >
         < p >< a href ="#foo" >Back to foo </ a ></ p >
     </ div > 

     < div data-role ="footer" >
         < h4 >Page Footer </ h4 >
     </ div > 
</ div > 
</ body >

ps：jQuery mobile 的这种语法可能会影响原始的HTML的书签的语法。