jQuery Mobile的变化
我有两个栏布局从网站的网页, http://jquerymobile.com/demos/1.0.1/jQuery Mobile的变化
现在他们已经使用 <a href="#xxx" data-role="button">Sample</a>
提供规定changePage但我的问题是如何使用的代码编程方式更改页。
$.mobile.changePage("#xxx");
不是为我工作
这里是你一个真实简单的例子:http://jsfiddle.net/shanabus/YjsPD/
$.mobile.changePage("#page2");
文档:http://api.jquerymobile.com/jQuery.mobile.changePage/
其他例子:
//transition to the "about us" page with a slideup transition
$.mobile.changePage("about/us.html", { transition: "slideup"});
//transition to the "search results" page, using data from a form with an ID of "search""
$.mobile.changePage("searchresults.php", {
type: "post",
data: $("form#search").serialize()
});
//transition to the "confirm" page with a "pop" transition without tracking it in history
$.mobile.changePage("../alerts/confirm.html", {
transition: "pop",
reverse: false,
changeHash: false
});
UPDATE
正如Chase Roberts在下面的评论中指出的,这个changePage
方法在版本1.4中已被弃用。以下是新的pagecontainer change事件的文档。
例子:
$.mobile.pageContainer.pagecontainer("change", "#page", { options });
这也是解决这个问题的SO:How to change page in jQuery mobile (1.4 beta)?
我知道这已经回答了,但肯定是正确的答案,为什么它不工作是语法不正确?
$ .mobile.changePage需要DOM对象(用于在使用散列语法的同一个HTML文件中显示页面),而不仅仅是一个字符串。所以给出的例子的正确语法是:
$.mobile.changePage($("#xxx"));
这应该是一种享受!
希望这有助于
不,这是正确的语法$.mobile.changePage("#page2");
或$.mobile.changePage("about/us.html");
请参阅API
请阅读上述答案。 – siva 2013-02-08 17:41:47
$.mobile.changePage($("#page2"));
是DIV是可见页面之间切换的正确方法。
如果使用
$.mobile.changePage("#page2");
的DOM将重新加载,并且任何ondocumentready事件将被触发。
+1 MM - 根据我的经验,如果您要从文件加载HTML页面,那么如果回调到父级,则该文件中的任何ChangePage调用都需要使用完整的DOM对象,而不仅仅是标签。 – 2013-09-24 02:39:33
您首先检查div块的开始和结束标记bcoz,如果某些标记丢失,页面转换是不可能的。 之后,使用下面的代码
$.mobile.changePage("#page2");
function signin() {
alert('singin button has been clicked');
$.ajax({
type: 'POST',
url: 'http://localhost:8080/json/login',
dataType: "json",
headers: {'Authorization':'Basic '+ btoa('abc' + ':' + '12345')},
contentType: 'application/json',
data:loginFormToJSON(),
success: function(data, textStatus, jqXHR)
{
if(data.token !="ErrorID-11000"){
alert('login successfully');
//document.location.href = "accountinfo.html";
//document.getElementById("loginBtn").replace="accountinfo.html";
$.mobile.changePage("accountinfo.html");
}
else{
alert('userid password did not match');
}
},
error: function(jqXHR, textStatus, errorThrown){
alert('login error:'+errorThrown + textStatus);
}
});
}
从上面的代码,我在登录页面,将帐户页面登录成功,这正与jQuery Mobile的1.4。
希望有所帮助。
感谢@shanabus当简单页面被使用时,这个答案正在工作。但是我使用左侧边栏这是一个菜单,右侧窗格是内容窗格。基于侧窗格中的变化,内容页面必须被加载。因为我想有动态的内容,我需要页面过渡编程。 – siva 2012-03-16 19:36:57
如果你看看Docs页面是如何做的话,它会重新加载整个页面,而不仅仅是内容窗格。 – shanabus 2012-03-16 20:45:32
Thanks @shanabus有什么方法可以单独重新加载内容窗格? – siva 2012-03-17 05:36:10