JQuery Mobile Swipe .load .prev和.next

时间:2012-07-03 17:48:33

标签: javascript jquery javascript-events jquery-mobile

我正在试图找出如何编写jquery,以便在向右滑动时将加载前一个兄弟并向左滑动它将加载下一个兄弟。我是JS菜鸟。

HTML / HAML

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

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

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

1 个答案:

答案 0 :(得分:2)

您可以通过在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/