使用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);

        }

    }

}