2011-11-06 94 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'); 
    } 
} 

一切工作很棒!