jquery移动更改页面

Posted 2023-05-09

【中文标题】jquery移动更改页面

【英文标题】：Jquery mobile change page

【发布时间】：2012-04-02 02:17:23

【问题描述】：

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

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

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

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

【参考方案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 在下面的 cmets 中指出的那样，这种 changePage 方法在 1.4 版中已被弃用。这是新的pagecontainer change 事件的文档。

例子：

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

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

【讨论】：

谢谢@shanabus 这个答案在使用简单页面时有效。但我使用的是左侧边栏，它是一个菜单，右侧窗格是内容窗格。基于侧面的变化窗格，必须加载内容页面。因为我想要动态内容，我需要以编程方式进行页面转换。

如果您查看文档页面的操作方式，它会重新加载整个页面，而不仅仅是内容窗格。

谢谢@shanabus 有没有办法单独重新加载内容窗格？

Siva 请发布解决方案或将其标记为答案，如果这实际上是答案

"注意：jQuery.mobile.changePage 自 jQuery Mobile 1.4.0 起已弃用，将在 1.5.0 中删除。请改用 pagecontainer 小部件的 change() 方法。"有没有人有任何使用 pagecontainer 小部件的例子？

【参考方案2】：

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

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

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

这应该是一种享受！

希望对你有帮助

【参考方案3】：

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

是在哪个 div 是可见页面之间进行更改的正确方法。

如果你使用

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

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

【讨论】：

+1 MM - 根据我的经验，如果您从文件中加载 HTML 页面，那么来自该文件的任何 ChangePage 调用都需要使用完整的 DOM 对象，而不仅仅是标签（如果回调）父母。

【参考方案4】：

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

【参考方案5】：

您首先检查 div 块的开始和结束标记 bcoz 如果某些标记丢失，则页面转换是不可能的。 之后使用以下代码

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

【参考方案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。

希望对您有所帮助。