Обновление меню в jQuery Mobile на основе события смахивания

Question

У меня есть меню, которое обновляется на основе события щелчка, что довольно легко, потому что я могу основать щелчок на фактической кнопке, но как мне заставить меню реагировать на изменения страницы с помощью пролистывания?

Вот мой рабочий JSFiddle, который учитывает щелчки и пролистывания: http://jsfiddle.net/QFX5x/1/

Я начал использовать pagebeforeshow и .mobile.path.parseURL для хэш-тега, но это не соответствует.

        $(document).live("pagebeforeshow", function() {
            var obj = $.mobile.path.parseUrl(window.location.href);
            var newPage = '.' + obj.hash;

            alert(newPage);

            //$(newPage).addClass("active");
            //$(newPage).siblings().removeClass("active");
        });

Answer 1

Когда я хочу имитировать какой-либо тип события, я просто использую .trigger(), чтобы вызвать это событие на правильном элементе, вместо того, чтобы переписывать мой код для запуска обработчика события в двух разных ситуациях. Поскольку ваш код работает с событием click, вы можете вызвать событие click по правильной ссылке на основе текущего элемента списка active:

$(function(){

    //cache all of the list-items in the navigation div
    var $nav   = $('#nav').children().children(),

        //also cache the number of list-items found
        totNav = $nav.length;

    //notice the use of `.on()` rather than `.live()` since the latter is depreciated
    $(document).on('swipeleft', '.ui-page', function() {

        //get the next index based on the current list-item with the `active` class
        var next = ($nav.filter('.active').index() + 1);

        //if you're already on the last page then stop the function and do nothing
        if (next === totNav) {
            return;
            //you could use this next line to wrap to the beginning rather than not doing anything
            //next = 0;
        }

        //trigger a `click` event on the link within the list-item at the next index
        $nav.eq(next).children().trigger('click');

    //notice I'm chaining the `.on()` function calls on the `$(document)` selection
    }).on('swiperight', '.ui-page', function() {

        //get the previous index
        var prev = ($nav.filter('.active').index() - 1);

        if (prev === -1) {
            return;
            //you could use this next line to wrap to the beginning rather than not doing anything
            //prev = (totNav - 1);
        }
        $nav.eq(prev).children().trigger('click');
    }).on('click', '#nav a', function(e) {

        //more chaining
        $(this).parent().addClass("active").siblings().removeClass("active");
    });
});​

Вот демоверсия: http://jsfiddle.net/QFX5x/4/