Question

我有来自网站的网页的两个列布局， http://jquerymobile.com/demos/1.0.1/

现在他们已经提供了使用changePage的条款 <a href="#xxx" data-role="button">Sample</a>

但我的问题是如何使用代码以编程方式更改页面。

$.mobile.changePage("#xxx");不适合我

Answer 1

以下是一个非常简单的示例：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
});

<强>更新

正如Chase Roberts在下面的评论中指出的那样，这个changePage方法在1.4版中已被弃用。以下是新pagecontainer change事件的文档。

示例：

$.mobile.pageContainer.pagecontainer("change", "#page", { options });

这也是在这个问题上解决的：How to change page in jQuery mobile (1.4 beta)?

Answer 2

我知道这已经得到了回答，但是为什么它不起作用的正确答案是语法不正确？

$ .mobile.changePage需要DOM对象（使用哈希语法在同一HTML文件中显示页面）而不仅仅是字符串。因此给出的示例的正确语法是：

$.mobile.changePage($("#xxx"));

这应该是一种享受！

希望这有帮助

Answer 3

$.mobile.changePage($("#page2"));

是更改div是可见页面的正确方法。

如果您使用

$.mobile.changePage("#page2");

将重新加载DOM，并且将触发任何ondocumentready事件。

Answer 4

不，这是正确的语法$.mobile.changePage("#page2");或$.mobile.changePage( "about/us.html");，请参阅Api

Answer 5

如果某些标签丢失，您首先会检查div块的开始和结束标记bcoz，无法进行页面转换。之后使用以下代码

$.mobile.changePage("#page2");

Answer 6

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一起使用。

希望有所帮助。

Jquery移动更改页面

6 个答案: