基於滑動事件的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事件，可以觸發基於當前active列表項正確的鏈路上的click事件：

$(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/