2011-11-06 88 views
0

我試圖擴展一個jQuery UI小部件。用jQuery Touchwipe插件擴展jquery-ui-carousel

該小部件可以在這裏找到:https://github.com/richardscarrott/jquery-ui-carousel

我使用的是0.8.5版本。 Touch擴展還沒有工作,所以我需要通過擴展Widget來爲自己創建一些超級基礎。我打算使用jQuery的Touchwipe插件,可以在這裏找到:http://www.netcu.de/jquery-touchwipe-iphone-ipad-library

這是我一直在努力的代碼,但我沒有與UI部件太多的經驗,所以我有點失落。任何幫助是極大的讚賞。

$.widget("rs.jdcarousel", $.extend({}, $.rs.carousel.prototype, { 

_touch: function(){ 

    elems.mask.touchwipe({ 
     wipeLeft : function() { if(theCarousel.isHorizontal ){ theCarousel.next(); } },//alert("left"); }, 
     wipeRight : function() { if(theCarousel.isHorizontal ){ theCarousel.prev(); } },//alert("right"); }, 
     wipeUp  : function() { if(!theCarousel.isHorizontal){ theCarousel.prev(); } },//alert("up"); }, 
     wipeDown : function() { if(!theCarousel.isHorizontal){ theCarousel.next(); } }, //alert("down"); }, 
     min_move_x : 20, //check this 
     min_move_y : 20, 
     preventDefaultEvents: true 
    }); 
} 

// Override other methods here. 

})); 

$.rs.jdcarousel.defaults = $.extend({}, $.rs.carousel.defaults); 

這顯然不起作用。

任何人都可以救我這個嗎?

謝謝!

-Jacob

回答

1

這裏就是我所做的:

我裝了jQuery TouchSwipe插件:http://plugins.jquery.com/project/touchSwipe

我加入以下JS頁面:

var swipeOptions = { 
    swipe  : swipe, 
    threshold : 75 
} 

    $("#investments").swipe(swipeOptions); 


function swipe(event, direction) { 

    if (direction == "left") { 
     $("#investments").carousel('next'); 
    } 
    else if (direction == "right") { 
     $("#investments").carousel('prev'); 
    } 
} 

一切工作很棒!