现在位置首页 / Jquery/Jquery Mobile /正文

Jquery mobile页面跳转js无法执行问题等小问题总结

作者: IT小兵 | 2013年8月8日| 热度:℃ | 评论: |参与:

算是Jquery mobile的初学者,遇到这样的问题,真是原来PC web开发所没有的。

页面跳转后,竟然不刷新js的数据。我痛苦啊。

问题:第一次切换页面时,菜单选中状态都可以正常显示,但在继续切换时,菜单选中状态就不显示了。

各个搜索引擎的疯狂找啊。

有几个方案:

1.可以用两种方法来解决:一是在index页面中,注册所有需要使用到的外部JS文件,或者使用母版页面来统一;二是将页面内部JS写在data-role="page"标签下,这样无论页面怎样跳转,均可以运行。

2.关闭Ajax效果:

禁止ajxa跳转有两种情况:

1、禁止局部ajax跳转

2、禁止全局ajax跳转

对于#1只需要在a标签中添加下面的属性:

data-ajax=“false”

有时我们要用正常的http请求而不用Ajax请求,比如链接到别的网站等情况。通过给a标签加下面的属性,可以将链接指定为正常的http请求:

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.';


3.jquery mobile弹出窗口

下面代码写入页面中:要放在你主页面page的后面。

<div data-role="dialog" id="dialog">

<div data-role="header" data-theme="d"><p style="text-align:center">操作提示</p></div>

<div data-role="content" data-theme="c">

<p>提示内容</p>

<a data-theme="b" href="index.html" data-role="button" data-rel="back">确定</a>

</div>

</div>

这里的data-role不是page,而是换成dialog了。

调用方式:$.mobile.changePage('#dialog', 'pop', true, true);

例子:

function SetCallBack(res) { 

    if (res != null) {

        if (res == "ok") {

            $("#psubmitok").html("提交成功,点击确定查看更多社区信息。");

            $.mobile.changePage('#dialog', 'pop', true, true);

        }

        else {

            $("#psubmitok").html("关注失败了,请刷新一下再试。");

            $.mobile.changePage('#dialog', 'pop', true, true);

        }

    }

}



点击阅读本文所属分类的更多文章: Jquery/Jquery Mobile 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:[email protected]

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:[email protected]

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询