[翻译介绍]jquerymobile页面(page)分解
Jquery Mobile"page"结构是优化的用于支持单页面和在一个页面中本身内部(local internal)的链接页。
mobile page structure手机页面结构:
一个Jquery mobile页面必需一HTML5的'doctype'开头,以充分利用此框架的所有特性。
基本页面如下:
运行后得图:
其一:
其二:
[img]
http://banxi1988.iteye.com/upload/picture/pic/104670/bda08fd3-ea25-3743-8ba4-b51e6131ded2.png
[/img]
jquery-mobile页面的基本分解就到这里了。
想知道更多前看官方文档:
http://jquerymobile.com/demos/1.0/docs/pages/page-anatomy.html
PS:下面根据这个分解所涉及的知识点再多翻译点相关的在这里:
一:关于页的标题(Page title)
1. Ajax导航中的标题
当你基于加载jQuery Mobile网站的第一个页面的时候,然后点击或者提交一个表单。
在获得所请求页面的时候利用了Ajax。在同一个DOM下包含这两个页面对于页面切换动画是必要的。但是这种方法的一个不好的地方就是页面的标题一直是第一个页面的标题。而不是你所浏览页面的标题。
为了解决这个问题,jQuery Mobile自动将页面的标题通过Ajax转换同时改变父文档的标题属性来适应。
2. 多页面模板下的标题
对于多模板文档,我们遵守相似的约定。但是因为所以的页面都共享同一个标题。我们为每一个page容器都设置了一个data-title属性来手动设置一个标题。html文档的标题会自动根据当前浏览的页面自动调整。
如下所示:
[code=html]
<div data-role="page" id="foo" data-title="Page Foo">
</div><!-- /page -->