如何在 jQuery Mobile 中更改页面？ [复制]

Posted 2023-05-09

【中文标题】如何在 jQuery Mobile 中更改页面？ [复制]

【英文标题】：How to change pages in jQuery Mobile? [duplicate]

【发布时间】：2017-08-31 17:59:57

【问题描述】：

我的代码是这样的：

<div data-role="page" id="LoginPage">

    <div data-role="header">

    </div>

    <div data-role="main" class="ui-content">
    <input type="button" value="התחבר" onclick="checkDetails()" />
    </div>

    <div data-role="footer">

    </div>
</div>

现在，通过函数 checkDetail() 我需要移动到 anthor 页面（下）

<div data-role="page" id="HomePage">

    <div data-role="header">
        <h3>asd</h3>
    </div>

    <div data-role="content" class="ui-content">

    </div>

    <div data-role="footer">
        <ul>
            <li><a>a</a></li>
            <li><a>as</a></li>
            <li><a>asd</a></li>
        </ul>
    </div>
</div>

问题是当我移动到它时，我到达主页但它显示为普通的 html 页面而不是 jquery 移动设备。 顺便说一句，LoginPage 显示为 jQueryMobile，但 HomePage 不是。

我就是这样移动的，

$('#LoginPage').hide(function () 
    $('#HomePage').show();
);

【参考方案1】：

您不应使用核心 jQuery 库中的 $.show() 和 $.hide() 方法进行页面导航。 jQuery Mobile 中的页面导航是通过Pagecontainer Widget 处理的——特别是使用change 方法。

在您的示例中，您将执行以下操作：

var homePage = $("#HomePage");
$.mobile.pageContainer.pagecontainer("change",homePage,);

【讨论】：

我在一些视频中看到过，而且工作很简单，不像你说的那样，我打开页面的方式不是手机设计

我无法理解。如果你说你看到一个视频告诉你使用.show() 和.hide() 打开jQuery Mobile 页面，那么那个视频是错误的。您需要使用 Pagecontainer 小部件。请参阅 Omar 链接的重复问题以获得相同的答案。