1

我最近开始使用 JQuery Mobile，到目前为止，我发现它是一个很棒的工具。它运行流畅、快速，并且考虑到 UI 易于管理。

但是，我现在遇到了一些困难，那就是：

  1. 我有一个应用程序要求用户使用电子邮件和密码登录。因此，我在 index.html 中包含了登录和帐户创建部分。应用程序本身 (app.html) 放置在一个名为 Application 的单独文件夹中，该文件夹有一个 .htaccess 文件，该文件应该阻止对 is 的直接访问（还没有设法解决这个问题）。

  2. 当用户登录时，（这将通过将 accountId、sessionId（在服务器端创建）发送到服务器来检查，这将返回 true 或 false）。如果为 false，应用程序将再次将用户重定向到 index.html。

然而奇怪的是，当用户登录并重定向到 app.html 页面时，它只加载第一页。

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

这很奇怪，因为 DOM 中应该有 10 个页面，但是在按 F12 预览生成的 DOM 时它没有显示这些页面。

在此旁边，它仍然在 DOM 中显示登录和创建帐户页面。

这就是我导航到新页面的方式：

$.mobile.changePage("Application/app.html", { transition: "slidefade", changeHash: false });

顺便说一下，这是 DOM 导航后的样子：

<body class="ui-mobile-viewport ui-overlay-c">
<div data-role="page" id="createaccount" data-url="createaccount">...</div>
<div class="ui-loader ui-corner-all ui-body-a ui-loader-default">...</div>
<div data-role="page" id="menu1" data-url="/Application/app.html" data-external-page="true" tabindex="0" class="ui-page ui-body-c ui-page-active">...</div>
</body>

预期结果：

<body class="ui-mobile-viewport ui-overlay-c">
<div data-role="page" id="menu1" data-url="/Application/app.html" data-external-page="true" tabindex="0" class="ui-page ui-body-c ui-page-active">...</div>
<div data-role="page" id="menu2" data-url="/Application/app.html">...</div>
<div data-role="page" id="menu3" data-url="/Application/app.html">...</div>
<div data-role="page" id="menu4" data-url="/Application/app.html">...</div>
<div data-role="page" id="menu5" data-url="/Application/app.html">...</div>
<div data-role="page" id="menu6" data-url="/Application/app.html">...</div>
<div data-role="page" id="menu7" data-url="/Application/app.html">...</div>
<div data-role="page" id="menu8" data-url="/Application/app.html">...</div>
</body>

通过使用 F12 编辑代码来操作 DOM，并创建一个带有显示在菜单项中的 ID 的页面。

它导航到该页面，但前一页已从 DOM 中删除，这使其看起来像一个“活动页面”问题。

4

0 回答 0