JQMobile中的页面与对话框

来源:互联网 发布:有什么特效软件 编辑:程序博客网 时间:2024/06/07 00:37

1.关于page容器

在page容器内,可以使用任何有效的html标签,但是page容器的直接子节点需要使用data-role标记属为“header”“content”“footer”的三个容器。

2.关于页面之间的跳转

1).如果是外部页面的链接,那么JQmobile会自动构建AJAX驱动的站点和应用。默认情况下,当你点击了一个指向外部页面(比如:products.html)的链接,JQmoblie的分析链接地址,然后产生一个ajax请求(Hajax),显示一个读取中的提示框。
如果AJAX请求成功,新页面的内容会添加到DOM中,所有MOBILE组件都会自动初始化,所以新的页面会通过页面转场动画看到。
如果AJAX请求失败,JQmoblie会显示一个小错误提示框(默认的主题为E),然后过一会就消失了,不会影响你继续浏览。
2).如果是本地(内部)的链接,因为每个page页面都有一个独特的ID,所以可以通过将内部链接地址定义为herf="#xxx"实现互相跳转。
3).若当前页面有链接到一个包含几个page的页面,那么这个链接需要添加rel="external"和data-ajax="false"的属性。这样告知JQmobile完全地加载一个页面,清理掉AJAX在URL的哈希值。
4).需要注意的是:对于所有AJAX的"page"使用的是哈希值来跟踪导航历史,所以现在还不可以通过外部页面的一个ID指向哪一个锚点,因为JqueryMobile会寻找带有该ID的"page",而不是滚屏到带有该ID的内容上。(暂不理解)
5).如果给某个链接添加了data-rel="back"的属性时,那么点击该链接时,都会无视链接的herf,后退到浏览器历史的上一个地址。如果只想看到一个翻转的页面转场而不是真正回到上一个历史记录的地址,要使用data-direction=“reverse”属性,而不是后退链接。(DW不支持data-dirction属性)
6).可以给链接添加data-transition属性来设定自定义的页面转场效果,属性值有pop(弹出)、slide(从右向左侧滑)、slideup(向上滑)、slidedown(向下滑)、flip(翻转)、fade(没什么效果)六种。

3.对话框的学习

1).当给链接添加属性data-rel=“dialog”时,该链接指向的页面会表现出对话框,JQmobile会自动给这个对话框添加效果,使对话框浮在页面上。
2).对话框也有转场,推荐使用pop、slide、flip属性来实现转场。
3).因为对话框是典型地用来给页面起支持作用的,所以JqueryMobile不会在历史记录的哈希值里包含对话框。这就意味着当点击对话框后退按钮时,他不会出现在你的浏览器历史记录里。比如说,如果你在一个页面上,点击了一个按钮打开了一个对话框,然后关闭了这个对话框,到了另一个页面。这时如果你点击浏览器的后退按钮,那你会回到第一个页面,而不是对话框。
0 0
原创粉丝点击