使用jqueryMobile的一些问题

转 http://www.thinksaas.cn/group/topic/201215/

jqueryMobile内联页面(Internal Page)强制刷新的代码如下：

$.mobile.changePage(pageurl, { 'allowSamePageTransition' : true, 'reloadPage' : true, 'transition' : 'none'});

代码解读：

pageurl： 指向当前页面的页面id或者路径allowSamePageTransition：默认情况下，changPage函数会自动忽略与当前页面相同的页面更改请求。将此标志设置为true，使其不能忽略页面更改请求。reloadPage：设置为true时，可令页面Dom重新装载，可触发一系列构造过程。transition：因为打开 allowSamePageTransition 时，会带来 transition 动画的问题(某些 transition 是假设新旧页面是不同)，所以将transition设置为none避开这个问题。

转 http://www.suchso.com/Jquery-JqueryMobile/jquerymobilepageinitjsexec.html

算是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);        }    }}