jQuery Mobile组件：页面和对话框-jquery组件

页面剖析

jQuery Mobile的"page"模型被优化为可以支持单个页面或者页面内嵌的"page".(译注:这里的page和传统意义上的页面有所不同,在jquery mobile里指的是page模型或者结构,data-role="page"的一个div就是一个page)

这个模型的目标是允许开发者在创建站点时利用***实践 — 传统的链接就是起作用了,不需要任何特别配置 — 在创建一个富客户端,类似于本地应用程序可不能简单的依靠标准的HTTP请求来达到.

page的结构

一个jQuery Mobile 的站点必须采用 HTML5 的'doctype' 标签才能充分利用框架的特性.(一些早期的上网设备不知道 HTML5为安全的忽略'doctype'标签和很多定制属性.) 在'head'标签里,jQuery Mobile,jQuery和主题css文件等像如下开始:

<!DOCTYPE html>  
<html>  
    <head>  
    <title>Page Title</title>  
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" /> 
 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script> 
</head>  
 
<body>  
 
... 
 
</body> 
</html>

在标签里, 每一个视图或者'page'被一个元素(通常是 div)设置data-role="page" 属性后所唯一标识:

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

在"page"容器内部,任何有效的HTML标记都可以使用,但是对于典型的jQuery Mobile页面而言,一个'page'的直接子元素是带有 data-role 为 "header", "content", and "footer"的div.

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

完整的page模版

总的说来,这是标准的样板page你应该使用的:

<!DOCTYPE html>  
<html>  
    <head>  
    <title>Page Title</title>  
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" /> 
 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script> 
</head>  
 
<body>  
 
<div data-role="page"> 
 
    <div data-role="header"> 
        <h1>Page Title</h1> 
    </div><!-- /header --> 
 
    <div data-role="content">    
        <p>Page content goes here.</p>       
    </div><!-- /content --> 
 
    <div data-role="footer"> 
 
        <h4>Page Footer</h4> 
    </div><!-- /footer --> 
</div><!-- /page --> 
 
</body> 
</html>

查看该模版

外部页面链接

jQuery Mobile 自动化了创建ajax站点和程序的过程.

默认情况下,当你点击一个链接时会指向一个外部页面(如.products.html), 但是框架会解析该链接的 href属性然后发出一个ajax请求(Hijax)并显示正在加载的提示.

如果ajax请求成功,新页面内容会添加到DOM当中,所有mobile widget都是自动初始化的,然后新页面会动画过渡显示出来.

如果ajax请求失败,框架会显示一个小小的错误消息提示('e'调板的样式),并会在一小段时间内消失, 并且不会破坏当前的导航流(译注:即页面不会刷新也不会对前进后退按钮有影响). 错误页面测试

内部页面链接

单个HTML文档可以包含多个'page',只需要在一个页面包含多个data-role="page"的div即可,每个pagediv必须由一个唯一的ID (id="foo") ,而链接到相应页面使用锚记即可(href="#foo").当点击一个链接时, 框架会寻找id为锚记href的内部'page'并显示到当前界面中.

要注意如果你正在通过ajax从一个mobile页面链接到一个含有多个内部页面的页面,你需要为该链接添加一个 rel="external" 或者 data-ajax="false" . 该属性告知框架对页面进行重新加载 ,url hash也将清零.这点十分关键,因为ajax 页面使用 hash(#)来追踪ajax历史,当含有多个内部page的页面使用hash 来指示内部page时会发生冲突.

举例来说,一个指向含有多个内部page的页面的链接会像这样:

<a href="multipage.html" rel="external">Multi-page link</a>

这儿有个2 'page'页面的例子,由两个jQuery Mobile div构建,每个div由其ID来导航,要注意这些page上的ID只需要支持内部的页面链接,如果每个页面是分离的HTML文档,这些ID则是可选的. 以下是两个page,在body 元素里面.

<body>  
 
<!-- Start of first page --> 
<div data-role="page" id="foo"> 
 
    <div data-role="header"> 
        <h1>Foo</h1> 
 
    </div><!-- /header --> 
 
    <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><!-- /content --> 
 
    <div data-role="footer"> 
        <h4>Page Footer</h4> 
    </div><!-- /header --> 
</div><!-- /page --> 
 
 
<!-- Start of second page --> 
<div data-role="page" id="bar"> 
 
    <div data-role="header"> 
        <h1>Bar</h1> 
 
    </div><!-- /header --> 
 
    <div data-role="content">    
        <p>I'm first in the source order so I'm shown as the page.</p>       
        <p><a href="#foo">Back to foo</a></p>    
    </div><!-- /content --> 
 
    <div data-role="footer"> 
        <h4>Page Footer</h4> 
    </div><!-- /header --> 
</div><!-- /page --> 
 
</body>

查看多page模板

请注意: 由于我们使用了hash来为所有ajax 'page' 追踪历史记录,现目前来说, 在一个jQuery Mobile page里还不可能把链接作为普通的锚记(index.html#foo), 因为框架会寻找一个 ID 为 #foo 'page' 来跳转,而不是像普通HTML页面那样滚动含有该ID的内容.

后退链接

如果你对一个a标签使用 data-rel="back" 属性,任何在上面的点击都会模拟后退按钮,而忽略它的href属性. 这点在链接回一个已命名的页面十分有用,比如当有一个到'home'链接或者当用javascript生成一个后退按钮时, 或者一个按钮用来关闭一个对话框.当在你的源代码使用这个特性的时候,一定要提供一个有意义的href实际指出引用页面的URL (这会使得该特性也能在C级浏览器中也能起作用). 同样,请记住如果你只是单纯使用一个后退过渡而不在历史记录中真正后退,你可以使用 data-direction="reverse"来替代.

重定向和链接到目录

当链接至一个目录地址时(比如用 href="typesofcats/"来替代 href="typesofcats/index.html"), 你必须提供一个后置斜杠.这是因为jQuery Mobile假定在url中***一个"/" 后面的部分是一个文件名,jQuery Mobile会移除该部分,以便在未来有页面被引用时创建基地址.

然而,你可以通过返回已经指定了data-url属性的page div来解决该问题. jQuery Mobile会使用该属性的值来更新URL来替换过去请求的那个页面. 这也允许你返回url的更改来作为重定向的结果,举例来说,你可以提交一个表单到"/login.html",但是成功提交后返回一个 url "/account". 该工具允许你在一些程度上控制jQuery Mobile 的历史记录栈,以下是一些例子:

这个链接指向"docs-links-urltest/index.html",该链接是一个目录里的索引页 : Test Link 返回的页面会用"docs/pages/docs-links-urltest/"(包含后置斜杠)来更新hash,这是通过那个页面的data-url的值来完成的. 谨记这个值会替换整个hash,是否替换取决于你自己,当刷新或者深入链接时URL发出的请求能解析正确的页面.#p#

页面过渡

Page transitions

jQuery Mobile 框架包括六个以CSS为基础的过渡，可以应用于任何对象或页面change事件，适用于导航时以所选择的过渡效果跳转到新的一页，以及为后退按钮设置的逆向过渡效果。默认情况下，框架采用从右至左的滑动(slide)的过渡效果。

要设置自定义的过渡效果，添加 data-transition 属性到该链接。可能的值包括：

<a href="index.html" data-transition="pop">I'll pop</a>

这是一个动画的网页过渡效果，我们为链接添加了一个 data-transition属性。

由于它使用CSS transform，这应该会在许多移动设备上得到硬件加速效果。

此外，你也可以强制指定一个data-direction="reverse" 用以在你的链接上实现"backwards"过渡。注：(这是以前的data-back="true"，这将继续被支持到1.0版本)#p#

对话框

创建对话框

任何页面链接中加入 data-rel="dialog"属性后都可以被看作一个模态对话框。当"dialog"属性被应用，框架会为页面增加一些样式,包括圆角，页边空白,深色背景来让对话框看起来像悬浮在页面上。

<a href="foo.html" data-rel="dialog">打开对话框</a>

打开对话框过渡

由于对话框是一个标准的“page”，它将以适用于所有page的标准过渡效果打开。和其他page一样,你可以指定你想要的任何过渡效果,只需要加入data-transition 属性到该链接。为了感觉更像对话框,我们建议你指定"pop", "slideup" 或者 "flip" 过渡效果。

<a href="foo.html" data-rel="dialog" data-transition="pop">Open dialog</a>

data-transition="pop" data-transition="slidedown" data-transition="flip"关闭对话框

当点击任何一个是在对话框中的链接时，框架会自动关闭对话框并过渡到请求的页面，就好像对话框是一个正常的page。要创建一个“取消”对话框按钮，只需链接到触发对话框打开的page, 然后添加 data-rel="back" 属性，这种模式在non-JS的设备中同样适用。

对于JavaScript生成的链接，您可以简单地将href属性设置为"#",并且添加 data-rel="back" 属性, 你也可以调用对话框的close() 方法或者编程关闭对话框,例如: $('.ui-dialog').dialog('close').

历史记录与后退按钮的行为

由于对话通常用于在一个页面动作，框架不会在hash历史中跟踪对话框。这意味着，对话框不会在你的浏览历史记录留下点击一个页面所应产生的效果。例如，如果你在一个网页中，点击一个链接打开一个对话框，关闭对话框，然后导航到另一个网页，如果你此时点击浏览器的后退按钮，你将被导航回到***个页面，而不是对话框。#p#

导航:Ajax, hashes & history

jQuery Mobile 的导航模型

(译注：jqm的导航模型是jqm的核心所在，由于jqm中区分了页面和page，所以在下文中要注意页面和page出现时所代表的不同意思，另下文中的“页面更改”或者“页面变化”大多指的是从当前页面链接到jqm中的另一个page。)

在jQuery Mobile里一个'page'由一个设置了data-role="page"属性的元素构成 (通常是div),通常里面包含"header", "content", 和 "footer",每个部分都可以包含普通的标签,表单和jQuery Mobile的自定义widget.

页面载入的基本工作流程如下：首先，用户对页面发起一个正常的HTTP请求，随后的'page'会被插入到当前页面的DOM当中。正因为如此，DOM每次可能会有'page'的一个数字, 每个都可以通过连接到它的data-url 属性来重新访问。

当一个URL在初始化请求时，可能有一个或多个“page”在响应，但只有***个将被显示。存储多个“page”的优势是，它可以让你预读有可能被访问静态页面。

Ajax驱动的页面导航

jQuery Mobile中的所有导航都基于 location.hash的更改,只要有可能，当前'page'到下一'page'的更改会平滑的过渡,无论该'page'是引进存在于DOM之中还是通过ajax自动的加载的。

hash值会在***个"真正"的页面被正常完整加载时创建。hash始终会被维护为一个可用的URL，所以任何jquery mobile中的 ‘page’都可以被标记为书签或者引用为一个链接。要获取非基于hash的URL，简单的移除地址中的 #，并刷新页面即可。

一般来说，每当jQuery mobile中的一个链接被点击时hash会发生变化。当链接被点击，jQuery mobile将确保该链接是引用一个本地URL，如果是这样，它会阻止链接的默认的点击行为，并通过Ajax请求引用的网址。当页面成功返回，它将location.hash设置到新的页面相关的URL 。

在框架内部，页面的改变(已经存在于DOM之中或者通过ajax加载的)使用$.mobile.changePage() 函数。$.mobile.changePage()包括所有寻找页面以及页面间切换的逻辑，和如何处理不同情况下请求的响应(比如页面没找到)。$.mobile.changePage() 可以在外部被调用，该函数接受如下的参数(to, transition, back, changeHash). to参数可以是一个string(如文件url或者当前页面的元素ID)，或是一个Array (***个数组元素为任意你想转自的当前页面中的page，第二个元素为转去的页面)，或者一个object(含有如下属性： url，type(get或post)，和 data(用于序列化的参数))，后者在加载含有表单数据时的页面十分有用，transition 参数接受一个string来表示采用何种过渡，例如“slide”。 back 参数接受一个boolean值，表示过渡是否应该前进或者相反。***，changeHash参数接受一个boolean值表示你是否要根据一个成功的页面更改来更新url。

$.mobile.changePage()函数在jQuery Mobile中很多地方都有用到。举例来说，当一个链接被点击时，它的href属性是正常的，然后$.mobile.changePage()会接手剩余的处理。的呢个表单被提交时， jQuery Mobile简单地手机表单的属性，并序列化它的数据，然后$.mobile.changePage() 再次接手该次提交并响应。同样的，创建对话框的链接也是用$.mobile.changePage() 来打开相应引用页 (只是不更新hash以保持对话框不会在历史追踪记录里面)。

另一个jQuery Mobile 页面导航模型中的关键要素是 base 元素，该元素被插入到head中，在每次页面变化时，该元素都会被修改以确保资源(css，js，图片等)能正确的被引用和请求。在不支持动态更新base元素浏览器(FF3.6)里，jQuery Mobile遍历所有页面引用的资源并把它们的href和src加上基地址作为前缀。

hash的更改在一次独立的点击时发生，比如一个用户点击后退按钮，会通过 hashchange事件进行处理，该事件绑定到window对象(使用包含在jQuery Mobile中的Ben Alman的特殊事件插件)。当一个hash更改发生时 (***次页面加载时同样如此)， hashchange 事件处理程序会发送 location.hash 给$.mobile.changePage()函数，以加载或者显示引用的页面。

一旦引用的页面存在在DOM当中了， $.mobile.changePage()函数会在当前页和引用页间应用一个过渡，以显示页面。页面过渡会通过添加和移除指定了css动画的class来实现。例如，在一个向左滑动的过渡效果中，已经存在的页面会被加上名为 "slideleft" 和 "out" 的class，将要显示的页面会被加上"slideleft" 和 "in" 的class，同样还有"ui-page-active" class来标记新的页面正要显示了。当动画完成后，"in" 和 "out" class 会被移除，而退出的页面会被移除 "ui-page-active" class

开发者必须知道的基地址管理 :

jQuery Mobile使用生成绝对URL路径和操作生成的元素的href属性来管理http请求。这两种途径的结合允许我们创建包含完整路径信息URL来加载页面，base元素将指示资源正确的被加载(css，图片)。

TODO: update description of internal base and urlHistory objects

自动生成的页面和子hash url

一些插件可能会选择动态折断页面的内容为可导航的页面，并通过层次化的链接来访问。Listview插件就是其中一个例子，该插件会折断一个嵌套的UL(或OL)为单独的页面，每个都被赋予了data-url属性以便于他们可以在jquery mobile中像其他页面一样被链接。然赫然，为了链接到这些页面中，生成的页面必须首先被请求。因此，被插件自动生成的页面使用如下特殊的data-url结构:<div data-url="page.html&subpageidentifier">

举例来说，一个由listview插件生成的页面可能会有一个像这样的data-url属性： data-url="artists.html&ui-page=listview-1"

当页面被请求时，jquery mobile 知道在"&ui-page"处要分割 url并使用前面的正确url片段来发送一个HTTP请求。至于在上文提到的listview例子中，url会像这样：http://example.com/artists.html&ui-page=listview-1 ，而jquery mobile则会请求artists.html，然后会生成它的子页面并显示(创建一个data-url="artists.html&ui-page=listview-1"的div)。

请注意，元素的data-url的属性包含完整的URL路径，而不仅仅是&ui-page=后的片段。这允许jquery mobile使用一个一致的机制来为页面的data-url属性匹配URL。

不使用ajax导航的情况

在某些情况下，正常的HTTP请求将被用来代替Ajax请求。一个情况就是当链接到外部网站时。你可以使用如下属性指定一个正常的HTTP请求：

rel=external

target (任何值都可以，如 "_blank")

表单提交

导航模型同样会自动处理表单提交。更多细节请阅读表单章节。

已知的限制

在非标准环境下由jquery mobile创建的页面导航模型在一些条件下会出现一些限制需要你注意：

任何在jQuery Mobile驱动的页面中，唯一的资源引用都会放置在‘page’元素中(data-role="page")。例如，样式表和脚本的链接可以在div内被引用并指定应用于相应的页面。然而，更好的途径是在页面加载时用jquery mobile的页面事件来触发指定的脚本。注: 你可以从服务器返回一个已经在标签中指定了data-url属性的页面， jQuery Mobile会利用此来更新hash。这可以使你确保带有斜杠的目录路径解析正确，因此也可以用于未来请求所需的基地址。

相反地，任何非唯一的资源(全局资源)应该在标签中被引用，或者至少在‘page’元素外面，以防止脚本重复运行。

"ui-page"关键词用于子hash的rul引用，可以设置为任何你喜欢的值，以便配合你自己的URL结构。该值存储于 jQuery.mobile.subPageUrlKey中。#p#

链接格式示例

页面主题化

jQuery Mobile 拥有一个丰富的主题化系统，让你可以完全控制如何显示一个页面的样式。每个页面部件(widget)都有详细文档可以参考，但是让我们先来看看一些高级别的例子来理解主题化是如何应用的。

data-theme 属性可以用在header和footer中，用任意字母来应用相应的主题调板。尽管 data-theme属性可以被添加到内容容器中，但是我们建议你把它添加到被分配了data-role="page"属性的 div 或者容器中，以确保背景色会在整个页面中应用。

默认的主题样式从多个调板种混搭得到，以创建视觉上的清晰感和高对比度感：

(译注：以下为jQM内置主题的展示，故不翻译,大家可以到jQM官网去看)