我正在使用 jquery mobile 创建一个 apache cordova 应用程序。 我有一个登录页面,成功登录后,使用 $( ":mobile-pagecontainer").pagecontainer("change", "mainpage.html");将页面重定向到 mainpage.html em> 在 mainpage.html 上,我有一个使用导航栏的多页模板。代码如下:-
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<!-- jQuery Mobile -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>Welcome To My Homepage</h1>
<div data-role="navbar">
<ul>
<li><a href="#" class="ui-btn-active" data-icon="home" rel="external" data-ajax="false">Home</a>
</li>
<li><a href="#pagetwo" data-icon="arrow-r" rel="external" data-ajax="false">Page Two</a>
</li>
</ul>
</div>
</div>
<div data-role="main" class="ui-content">
<p>With the ui-btn-active class, notice that the Home button stays highlighted (selected).</p>
<p>If you click on the Page Two, you will notice that none of the buttons are highlighted (selected).</p>
</div>
<div data-role="footer">
<h1>My Footer</h1>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="header">
<h1>Welcome To My Homepage</h1>
<div data-role="navbar">
<ul>
<li><a href="#pageone" data-icon="home" rel="external" data-ajax="false">Home</a>
</li>
<li><a href="#" data-icon="arrow-r" rel="external" data-ajax="false">Page Two</a>
</li>
</ul>
</div>
</div>
<div data-role="main" class="ui-content">
<p>No buttons are pre-selected (highlighted) in this page..</p>
<p>To get the selected look for each button that represents the page you are actually on, go back to our navbar tutorial and read the next step to find out how!</p>
</div>
<div data-role="footer">
<h1>My Footer</h1>
</div>
</div>
问题是,当我单击第二页 选项卡时,它不会在第一次加载。再次单击它时,它会加载 ID 为 page two
的 div你能帮我解决第一次点击不加载第二页的问题吗?
最佳答案
惰性解决方案:
使用纯 javascript 更改页面。
location.href = "mainpage.html";
复杂/肮脏的解决方案
我能够重现您的问题。
问题是 jquery-mobile 如何处理 ajax 导航。如果您从 page1.html
链接到 page2.html
。 Jquery-mobile 将查看 page2.html
并只获取带有 data-role="page"
的第一个 div
并将其加载到 page1.html
如果链接到多页,您将始终获得第一页,仅此而已。要更改此设置,您必须将 rel="external"
添加到链接中。这样框架就可以加载整个页面、页眉和所有包含的页面。
有了这些知识,我们唯一应该在 $( ":mobile-pagecontainer").pagecontainer("change", "mainpage.html")
上改变的是说 jqm 他应该重新加载页面。
The Api doc表示有一个选项 reload
或 reloadPage
(已弃用)。但不幸的是,这没有任何改变。我不知道它是否不起作用,或者我是否不理解正确的选项。
$( ":mobile-pagecontainer" ).pagecontainer("change", "mainpage.html", {reloadPage : true});
如果您附加选项 dataUrl : "mainpage.html"
pagetwo
仍然没有加载到 DOM 中,而是 pagetwo
的 anchor > 正在工作。
但是您会注意到浏览器 url-bar (start.html#mainpage.html) 中一团糟
$( ":mobile-pagecontainer" ).pagecontainer("change", "mainpage.html", {reloadPage : true, dataUrl : "mainpage.html"});
现在您可以附加另一个选项 changeHash: false
以在加载新页面时不更改哈希/url。
$( ":mobile-pagecontainer" ).pagecontainer("change", "mainpage.html", {reloadPage : true, dataUrl : "mainpage.html", changeHash: false});
这样您就不会在浏览器的网址栏中弄得一团糟。但是您无法使用浏览器的后退按钮导航回来。重新加载会将您带到上一页。
关于apache - jquery 移动导航链接在第一次点击时不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35111733/