スワイプを使用してURLを変更し、データ方向を制御します

Question

次のjQueryを使用して、ユーザーが左右にスワイプして同じドキュメント内の別のページに移動できるようにします。

$('#main').bind('swiperight', function(){ 
    window.location = '#menu'; 
}); 
$('#main').bind('swipeleft', function(){ 
    window.location = '#showcase'; 
}); 
$('#showcase').bind('swiperight', function(){ 
    window.location = '#main'; 
}); 

問題はデータ方向を制御できないことです。ユーザーが右にスワイプすると、コンテンツが左から右に、またはその逆に移動することは意味があります。

アイデア？

ありがとうございます！

Answer 1

代わりのwindow.locationを使用して、あなたはこの使用できます。文字列「スライド」（前後に）方向を指示した後

// swiperight function 
$.mobile.changePage("#menu", "slide", true, true); 

// swipeleft function 
$.mobile.changePage("#showcase", "slide", false, true); 

にブール値を。 changePage機能上の

ドキュメント：http://jquerymobile.com/test/docs/api/methods.html

私はこの記事で、このソリューションの一部を発見した：これは私の作品

$('#main').bind('swiperight', function(){ 
    $.mobile.changePage("#menu",{ 
     reverse: true, 
     transition: "slide" 
}); 
}); 

$('#main').bind('swipeleft', function(){ 
    $.mobile.changePage("#showcase",{ 
     transition: "slide" 
}); 
}); 
$('#showcase').bind('swiperight', function(){ 
    $.mobile.changePage("#main",{ 
     reverse: true, 
     transition: "slide" 
}); 
}); 

：sliding left to right transition in jQuery Mobile

Answer 2

はこれを試してみてください！ :)