更新メニューは、スワイプイベントに基づいて

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

私はちょうど2つの異なる状況でイベントハンドラを実行するために、正しい要素ではなく、再書き込み私のコードでそのイベントをトリガする.trigger()を使用したイベントのいくつかのタイプを模倣します。ここで

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