• 13596 阅读
  • 1 回复

jquery mobile 如何禁掉ajax跳转

问题描述:
尽管ajax跳转有很炫的转屏动画,但是在某些时候为了性能或者为了业务需求还是需要禁掉ajax跳转的。
解决办法:
禁止ajxa跳转有两种情况:
1、禁止局部ajax跳转
2、禁止全局ajax跳转
对于#1只需要在a标签中添加下面的属性:
data-ajax=“false”
有时我们要用正常的http请求而不用Ajax请求,比如链接到别的网站等情况。通过给a标签加下面的属性,可以将链接指定为正常的http请求:
data-rel=external

对于#2我们需要设置一个全局的禁止ajax跳转的方式,js代码如下:
$(document).bind("mobileinit",function(){// disable ajax nav            $.mobile.ajaxEnabled=false});
注意:上面的代码片段需要放在jquery.mobile-xxx.min.js引入之前。
顺便说一句,初始化的设置都需要放在此处,例如加载错误信息的设置:
$.mobile.pageLoadErrorMessage ='Sorry, something went wrong. Please try again.';
本帖最后由 一片云 于 2015-03-28 16:13 编辑
1.data-rel= back data-direction= reverse 区别

data-rel返回是返回到原先的url

data-direction返回 有返回的效果,但是Url不变,比如在一个界面中图片下一张,返回就上一张图片的效果。

2.a的一些用法

<a href="#div1" data-icon="back" data-rel="back" rel="external" data-ajax="false" data-transition="slide" >

#id 表示的url将跳转到div=id的page处

data-rel="external" 或则data-ajax="false"告诉浏览器不采用ajax方式来跳转页面,防止破坏url地址

data-transition=slide 表示从右至左的特效展示新Url,当然也有别的方式比如Pop ,flip

当然默认是slide



3.重定向到目录下的首页

当链接至一个目录地址时(比如用 href="typesofcats/"来替代 href="typesofcats/index.html"

4.打开一个对话框

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

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

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

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

由于对话通常用于在一个页面动作,框架不会在hash历史中跟踪对话框。 这意味着,对话框不会在你的浏览历史记录留下点击一个页面所应产生的效果。 例如,如果你在一个网页中,点击一个链接打开一个对话框,关闭对话框, 然后导航到另一个网页,如果你此时点击浏览器的后退按钮,你将被导航回到第一个页面,而不是对话框。
本帖最后由 一片云 于 2015-03-28 16:12 编辑