使用滑动手势来更改多页jQuery移动应用程序中的页面

有没有办法在jQuery Mobile多页面模板移动网站/应用程序上实现滑动手势导航？

我可以将一个死的简单构造放在一起，如下所示：

$("body").bind("swipeleft", function(e) { $.mobile.changePage( 'about.html', { transition: "slide" }); 

但是当我开始使用锚标签（多页JQM样式）时，该事件不起作用：

 $("body").bind("swipeleft", function(e) { $.mobile.changePage( '#points2', { transition: "slide" }); 

是否有适合的解决方法或者我是否必须放弃多页设置才能使其正常工作？

Answer 1

工作示例： http ： //jsfiddle.net/Gajotres/JB22E/3/

HTML：

           
 
 
Articles
 
 
 
Article 1
 
 
 
 
 Home 
Articles
 
 
 
Article 2
 
 
 
 
 Home 
Articles
 
 
 
Article 3
 
 
   

JavaScript的：

 $(document).on('swipeleft', '.ui-page', function(event){ if(event.handled !== true) // This will prevent event triggering more then once { var nextpage = $.mobile.activePage.next('[data-role="page"]'); // swipe using id of next page if exists if (nextpage.length > 0) { $.mobile.changePage(nextpage, {transition: "slide", reverse: false}, true, true); } event.handled = true; } return false; }); $(document).on('swiperight', '.ui-page', function(event){ if(event.handled !== true) // This will prevent event triggering more then once { var prevpage = $(this).prev('[data-role="page"]'); if (prevpage.length > 0) { $.mobile.changePage(prevpage, {transition: "slide", reverse: true}, true, true); } event.handled = true; } return false; });