javascript - 如何在 Div Bootstrap 上应用滑动功能

Question

我正在开发一个移动应用程序项目(混合)，我需要实现日历来添加事件， 我浏览了很多网站，最后我正在实现 This
我的项目中的日历， 代码工作正常，但我需要更改 swipe 事件而不是按钮 Click 事件的月份。我试图理解代码的 JS 文件，并且我知道以下事件负责更改NEXT 按钮上的月份

这是我的 JS 文件

$('.btn-group button[data-calendar-nav]').each(function() {
    var $this = $(this);
    console.log($this);
    $this.click(function() {
        calendar.navigate($this.data('calendar-nav'));
    });
});

HTML:

<button class="btn btn-primary" data-calendar-nav="next">Next >></button>

如何在日历滑动上应用月份更改事件

<div id="calendar"></div>

请帮忙，

Answer 1

我可以推荐两个可能有用的库:

https://github.com/mattbryson/TouchSwipe-Jquery-Plugin

http://hammerjs.github.io/

然后你要做的就是将滑动回调绑定(bind)到点击处理程序

示例代码可能需要稍微调整:使用 touchswipe

$(function() {      
      $("#calendar").swipe( {
        swipe:function(event, direction, distance, duration, fingerCount, fingerData) {
          // direction  - left , right , up , down    
          if( direction  == "left" ) $('.btn-group button[data-calendar-nav]').click()
        },            
         threshold:0
      });
});