jquery - 添加对 Bootstrap 选项卡的滑动支持

Question

我目前有一个带有两个不同选项卡的 Bootstrap 选项卡 Pane 。是否可以在触摸屏设备上支持滑动手势来切换选项卡？我找到了大量用于轮播的库，但没有找到用于选项卡的库。

Answer 1

1. 转到http://jquerymobile.com/download-builder/ , 在事件中 选择触摸。按“构建我的下载”。下载存档。
2. 将下载的存档中的 jquery.mobile.custom.min.js 添加到您的 javascript 文件夹中。现在，我们支持 touchstart、touchmove、touchend、tap、taphold、swipe、swipeleft、swiperight、scrollstart、scrollstop 事件。

3. 您的 HTML:

   <script src="jquery.mobile.custom.min.js"></script>
   
   <script>
       $(function() {
           $(".tab-content").swiperight(function() {
               var $tab = $('#tablist .active').prev();
               if ($tab.length > 0)
                   $tab.find('a').tab('show');
           });
           $(".tab-content").swipeleft(function() {
               var $tab = $('#tablist .active').next();
               if ($tab.length > 0)
                   $tab.find('a').tab('show');
           });
       });
   </script>
   
   <div role="tabpanel">
   
     <!-- Nav tabs -->
     <ul class="nav nav-tabs" role="tablist" id="tablist">
       <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
       <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
     </ul>
   
     <!-- Tab panes -->
     <div class="tab-content">
       <div role="tabpanel" class="tab-pane active" id="home">...</div>
       <div role="tabpanel" class="tab-pane" id="profile">...</div>
     </div>
   
   </div>