如何使用 jQuery Mobile 防止链接添加到历史堆栈

Question

使用 jQuery mobile，我使用带有前一个和下一个链接的列表视图进行分页。一切正常，但我不希望将上一页和下一页添加到历史堆栈中。这个想法是，回击只会转到实际的上一页。

我发现这样做的唯一方法是将 data-rel="dialog" 添加到 a 标签，但我不希望它是一个弹出对话框。

否则我尝试添加

$.mobile.nonHistorySelectors="dialog,pagination"

到 mobileinit 事件，属性 data-rel="pagination" 添加到 a 标签。但这只会在单击链接时引发错误（即使没有将 nonHistorySelectors 添加到 mobileinit 事件中也会发生错误）。

编辑：

我找到的最接近的就是这个 JS

<script type="text/javascript">
    $(".page-prev").click(function(e) {
        e.stopPropagation();
        e.preventDefault();

        $.mobile.changePage(this.href, {changeHash:false, reverse:true});
    });

    $(".page-next").click(function(e) {
        e.stopPropagation();
        e.preventDefault();

        $.mobile.changePage(this.href, {changeHash:false});
    });
</script>

还有这个 HTML

<a href="/blog?page=1" class="page-prev" data-role="button" data-icon="arrow-l">Prev</a>
<a href="/blog?page=3" class="page-next" data-role="button" data-icon="arrow-r">Next</a>

这似乎可以很好地防止浏览器历史记录被更新，但有时当单击下一步时，页面会四处滑动会做一些时髦的事情，例如加载/滑动两次。另外它没有做的一件事是，如果我从这里导航到一个页面并返回，它将返回到第 1 页。

Answer 1

没有机制可以从浏览历史记录中静默删除任何内容。

您应该使用 AJAX 来填充您的列表。 所以你的链接看起来像<a href="javascript:renderNextPage()">

Answer 2

这样做应该没问题：

 // Fix for back buttons
    $(document).on('vclick', '[data-rel=back]', function(e) {
        e.stopImmediatePropagation();
        e.preventDefault();
        // $.mobile.back(e);
        var back = $.mobile.activePage.prev('[data-role=page]');
        $.mobile.changePage(back, {
            transition: 'slide',
            reverse: true,
            changeHash: false
        });
    });

Answer 3

将data-rel="back"添加到锚标签是否有效？

这是 jQuery Mobile 演示文档中“反向链接”下建议的解决方案。

http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/pages/docs-pages.html

Answer 4

我遇到了同样的问题，我的解决方案是将站点导航和分页导航拆分为两个单独的导航菜单。所以我有网站导航的标题导航，并将下一个/上一个导航按钮添加到页面：AJAX Request Help for next/previous page

现场示例：

• http://jsfiddle.net/Jaybles/MawSB/

更新：

这是我的意思的一个快速示例：

• http://jsfiddle.net/phillpafford/trdYP/26/

JS：

var currentPage=1;
loadCurrentPage();

$("#next, #prev").click(function(){
    currentPage= ($(this).attr('id')=='next') ? currentPage + 1 : currentPage - 1;

    if (currentPage==0) 
        currentPage=1;
    else if (currentPage==101) 
        currentPage=100;
    else
        loadCurrentPage();
});

function loadCurrentPage(){
    //$('input').attr('disabled','disabled');
    $('#displayResults').html('<img src="http://blog-well.com/wp-content/uploads/2007/06/indicator-big-2.gif" />');

    $.ajax({
        url: '/echo/html/',
        data: 'html=Current Page: ' + currentPage+'&delay=1',
        type: 'POST',
        success: function (data) {
           // $('input').attr('disabled','');
            $('#displayResults').html(data);
        }
    });

    $('#home').page();
}

HTML：

<div data-role="page" id="home"> 
    <div data-role="content">
        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f"> 
            <li data-role="list-divider">Home Page</li> 
            <li><a href="#page2">Page 2</a></li> 
        </ul> 
        <input id="next" type="button" value="Next" />
        <input id="prev" type="button" value="Previous" /> 
        <div id="displayResults" name="displayResults">
        </div>
    </div>
</div>
<!-- Page 2 -->
<div data-role="page" id="page2"> 
    <div data-role="content">
        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f"> 
            <li data-role="list-divider">Page 2</li> 
            <li><a href="#home">Home Page</a></li> 
        </ul>
    </div>
</div>

Answer 5

data-rel attr 对我有用

<a data-rel="dialog" ... 

根据文档

链接 链接，包括带有 data-role="button" 的链接和表单提交按钮共享这些属性

data-rel 后退（使历史倒退一步）

对话框（以对话框形式打开链接，不在历史记录中跟踪）

外部（用于链接到另一个域）

https://demos.jquerymobile.com/1.0/docs/pages/page-links.html