为引导选项卡添加滑动支持

Question

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

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>