JQuery Mobile Swipe .load .prev 和 .next答案

【问题标题】：JQuery Mobile Swipe .load .prev and .nextJQuery Mobile Swipe .load .prev 和 .next
【发布时间】：2012-07-03 17:48:32
【问题描述】：

我正在尝试弄清楚如何编写 jQuery，以便在向右滑动时它将加载前一个兄弟姐妹，向左滑动它将加载下一个兄弟姐妹。我是 JS 的新手。

HTML/HAML

#gallery
   #active-pane
   #pane1.pane
     Pane 1
   #pane2.pane
     Pane 2
   #pane3.pane
     Pane 3
   #pane4.pane
     Pane 4

我有下面的 JQuery 工作。但我真的希望它只加载上一个和下一个兄弟姐妹。滑动 .pane 并获取下一个或上一个。

$("#pane1").swiperight(function() {
    $('#active-pane').load("/additional-info #pane2").fade("slow");
    return false
});

【问题讨论】：

标签： javascript jquery jquery-mobile jquery-events

【解决方案1】：

您可以通过在 swiperight/swipeleft 事件上使用幻灯片切换来更改页面来做到这一点。

 $(".ui-page").swiperight(function() {
    $.mobile.changePage( $('#'+getNextPageId()), 
                         { transition: "slide", reverse:false});
 });


 $(".ui-page").swipeleft(function() {
    $.mobile.changePage( $('#'+getPrevPageId()), 
                         { transition: "slide", reverse:true});
 });

完整演示：http://jsfiddle.net/nachiket/MsP4u/

【讨论】：