Question

我在JQM页面中有导航栏：

<div data-role="navbar">
    <ul>
        <li><a href="#about" class="ui-btn-active ui-state-persist">About</a></li>
        <li><a href="#details">Details</a></li>
    </ul>
</div>

两个页面都具有相同的navbar。

我有后退按钮如下：

<a href="#" data-icon="back" data-rel="back" >Back</a>

问题是，在查看页面之前，后退按钮不会转到上一页，＃history和#about页面都包含在历史记录中。如何忽略或排除这两个页面，以便单击后退按钮将转到首先加载它的页面。

Answer 1

您不能因为“data-rel = back”使用浏览器历史记录，因此：

以“Main”开头
点击“关于”
点击“详细信息”
点击“关于”
点击“返回” - 返回“详细信息”
点击“返回” - 返回“关于”
点击“返回” - 返回“主要”，哇哇！

我建议您删除“关于”和“详细信息”页面上的导航栏，这样您只有一种方法：返回您调用它的页面。

Answer 2

最简单的方法是制作关于和详细信息页面的jquery移动对话框页面（参见documentation）。

<a href="foo.html" data-rel="dialog">Open dialog</a>

历史记录中不会跟踪对话框页面，这应该达到您要查找的目标。

Answer 3

试试这个解决方案：

<script>
$('#about').click(function(){
    $('#contentDiv').html('Your content');
});
$('#details').click(function(){
    $('#contentDiv').html('Your content');
});
</script>
<body>
<div data-role="page" id="main">
    <div id="contentDiv" data-role="content">
    </div>
    <div data-role="navbar">
        <ul>
            <li><a id="about" class="ui-btn-active ui-state-persist">About</a></li>
            <li><a id="details">Details</a></li>
        </ul>
    </div>
</div>
</body>

使用此解决方案时，您将确保在单击后退按钮时转到上一页。

带导航栏的JQuery Mobile Back Button

3 个答案: