Question

我正在尝试扩展jQuery UI Widget。

可在此处找到小部件：https://github.com/richardscarrott/jquery-ui-carousel。

我使用的是0.8.5版本。 Touch扩展程序尚未运行，因此我需要通过扩展Widget为自己创建一些超级基础。我打算使用可在此处找到的jQuery Touchwipe插件：http://www.netcu.de/jquery-touchwipe-iphone-ipad-library

这是我一直在尝试的代码，但我对UI Widgets没有多少经验，所以有点迷失。非常感谢任何帮助。

$.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

Answer 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');
  }
}

一切都很好！

使用jQuery Touchwipe插件扩展jquery-ui-carousel

1 个答案: