Как предотвратить добавление ссылки в стек истории с помощью jQuery Mobile

Question

Используя jQuery mobile, я использую представление списка с предыдущей и следующей ссылками для разбивки на страницы.Все работает нормально, но я не хочу, чтобы предыдущие и последующие страницы добавлялись в стек истории.Идея состоит в том, что обратный удар просто приведет к предыдущей странице.

Единственное, что я нашел для этого, - это добавление data-rel = "dialog" к тегам a, но я нехочу, чтобы это был всплывающий диалог.

В противном случае я попытался добавить

$.mobile.nonHistorySelectors="dialog,pagination"

к событию mobileinit, добавив атрибут data-rel = "pagination" в тег,Но это приводит к ошибкам только при щелчке по ссылкам (ошибка также возникает, даже если 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

Сделайте это, и все должно быть в порядке:

 // 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 2

Работает ли добавление data-rel="back" к тегу привязки?

Это решение, предложенное в демонстрационной документации jQuery Mobile, в разделе «Обратная связь».

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

Answer 3

Не существует механизма, который мог бы что-либо молча удалять из истории просмотров.

Вы должны использовать AJAX для заполнения своего списка.И поэтому ваши ссылки будут выглядеть как <a href="javascript:renderNextPage()">

Answer 4

Атрибут data-rel работает для меня

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

Согласно документации

Ссылка Ссылки, в том числе с data-role = "button" и кнопками отправки формы, разделяют эти атрибуты

data-rel back (чтобы вернуться на шаг назад в истории)

диалоговое окно (открыть ссылку в стиле диалога, не отслеживаемого в истории)

внешний (для связи с другим доменом)

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

Answer 5

У меня была та же проблема. Моим решением было разделить навигацию по сайту и навигацию по страницам на два отдельных навигационных меню. Таким образом, у меня есть заголовок навигации с навигацией по сайту, и я добавил бы следующие / пред. Навигационные кнопки на страницу: AJAX Запрос справки для следующей / предыдущей страницы.

Live Пример:

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

UPDATE:

Вот быстрый пример того, что я имею в виду:

• 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>