Jquery Mobile的导航模型 Jquery Mobile's navigation model · jQuery Mobile 中文文档 A4

# Jquery Mobile的导航模型 Jquery Mobile's navigation model 在Jquery Mobile中，一个页面"就是一个data-role属性被设为"page"的容器，通常为div容器，里面包含了"header", "content",“footer"三个容器，各自可以容纳普通的html元素，表单和自定义的Jquery Mobile组件页面载入的基本工作流程如下：首先一个页面通过正常的http请求到，然后”page"容器被请求，插入到页面的dom当中。所以dom文档中可能同时有多个"page"容器，每一个都可以通过链接到他们的data-url被访问到当一个url被初始化请求，可能会有一个或多个"page"在相应，而只有第一个被显示。存储多个“page"的好处在于可以使你预读有可能被访问的静态页面 ## Ajax驱动的页面导航 Ajax-driven page navigation Jquery Mobile中所有的导航都是基于location.hash的改变和更新实现的。当可实施时，页面的转变都会在当前页面与下一个页面间使用平滑的转场效果，不管它已经在当前的dom文档中，还是自动通过ajax读取的 Jquery Mobile会在第一个”真正"的页面加载完毕时创建哈希值，其值为相对于url的完整路径，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参数可以是一个字符串（比如文件url或者当前页面的元素ID值或是一个数组（第一个数组元素为任意你想转自的当前页面中的page，第二个元素为转去的页面），或者一个对象（含有如下属性： url，type（get或post），data（用于序列化的参数）），后者在加载含有表单数据时的页面十分有用，transition 参数接受一个字符串来表示采用何种转场效果，例如"slide"?back参数接受一个布尔值，表示转场应该前进还是相反。最后，changeHash参数接受一个布尔值表示你是否?根据一个成功的页面更改来更新url $.mobile.changePage()函数在Jquery Mobile中很多地方都有用到。例如，当一个链接被点击时，它的href属性被解析，然?.mobile.changePage()会处理。当表单被提交时，Jquery Mobile手机一部分表单的属性，将数据序列化，然后.mobile.changePage() 再次接手该次提交并响应同样的，创建对话框的链接也是由.mobile.changePage() 来打开相应引用页，但是不更新哈希值，使对话框不会在历史记录中另一个Jquery Mobile页面导航模型中的关键要素是base元素,它被插入到head中，在每次页面变化时，该元素都会被修改以确保资源（css，js，图片等）都能够从正确的地址取到。在不支持动态更新base元素的浏览器（FF3.6）里，Jquery Mobile会遍历所有页面引用的资源并把它们的href和src加上基地址作为前缀哈希值会在一次独立的点击时发生时变化，比如一个用户点击后退按钮，会通过 hashchange事件进行处理，该事件通过Jquery Mobile的哈希值改变的特殊事件插件（作者Ben Alman）绑定到window对象。当一个哈希值更改是，或者第一次页面加载时 hashchange 事件处理程序会发 location.hash.mobile.changePage()函数，以加载或者显示引用的页面引用的页面存在DOM当中之后 .mobile.changePage()函数会在当前页和引用页间应用一个转场，以显示页面。页面转场会通过添加和移除指定了css动画的class来实现。例如，在一个向左滑动的转场效果中，已经存在的页面会被加一个名为 "slideleft""out" 的class，将要显示的页面会被加上 "slideleft" 为"in" 的class。动画结束后,"in"”out"的class 被删除，退出的页面"ui-page-active"的class被删 ## base url 管理解释 Developer explanation of base url management: Jquery Mobile使用 1生成的绝对URL地址，2操作生成<base>元素的href属性的两种办法的结合管理http请求,这两种方法的结合允许我们创建包含完整路径信息URL来加载页面，base元素将指示资源正确的被加载（比如图片和样式表） ## 自动生成的页面和子哈希表 Auto-generated pages and sub-hash urls 一些Jquery Mobile的控件可能会根据情况动态地把一个页面的内容分离为多个可导航的页面，并通过层次化的链接来访问。比如说list控件，他会把一个嵌套的列表(ul或者ol)分离为多个页面，每一个页面赋予一个data-url属性，可以想正常的"page"页面一样被链接到。但是为了链接到这些页面，生成他们的源页面必须首先从服务器请求到，所以通过自动生成的页面会应用这样的特殊data-url结构: ``` <div data-url="page.html&subpageidentifier"> ``` 所以例如通过列表控件生成的一个页面会拥有这样的data-url属性： data-url="artists.html&ui-page=listview-1 一个页面被请求到后，Jquery Mobile会在&ui-page处拆开url地址，使得http请求的是artists.html。在这个例子中，url应该为：http://example.com/artists.html&ui-page=listview-1 而Jquery Mobile会请求： artists.html，然后他会生成子页面，创建div容器标记 data-url="artists.html&ui-page=listview-1"的属性，最后作为活动页面显示注意，元素data-url属性包含的是完整的url路径，而不仅仅是&ui-page=之后的部分。这样Jquery Mobile就可以通过一个一致的机制来为页面的data-url属性匹配URL ## 不使用ajax导航的情况 Cases when Ajax navigation will not be used 有时我们要用正常的http请求而不用Ajax请求，比如链接到别的网站的情况。通过给链接加下面的属性，可以将链接指定为正常的http请求: ``` rel=external target (打开规则, 例如"_blank") ``` ## 表单的提交 Form submissions Jquery Mobile也会自动通过导航模型处理表单的提交。更多细节请阅读表单章节: ## 已知的限制 Known limitations 当某链接指向的是一个不带文件名的目录时,比如href="typesofcats/" 而不是href="typesofcats/index.html"),路径后必须加一个反斜杠("/")。因为Jquery Mobile会假定url里最后一个反斜杠后面的部分为文件名，从将来的引用到的页面创建基地址时会删除掉这个文件名在jqmoible驱动的网站中，页面内所有指向唯一资源的引用都需要放在“page"容器内（拥有data-role=page属性的容器）例如，指向针对某一个页面的样式表和js的链接可放在div中。但是我们推荐使用Jquery Mobile的page事件来当该页面加载完成时触发特定的脚本执行 ; 你可以从服务器返回一个已经在标签中指定了data-url属性的页面,Jquery Mobile会利用此来更新hash。这可以使你确保带有斜杠的目录路径解析正确，因此也可以用于未来请求所需的基地址. 而相反的，所有非唯一的资源（全局资源）应该在html文档<head>标签中被引用,或者至少在'page'元素外面，以防止脚本重复运行. "ui-page"词名用于子hash值的url引用，可以设置为任何你喜欢的值，以便配合你自己的URL结构，该值存储于 Jquery.mobile.subPageUrlKey中