为Bootstrap选项卡添加滑动支持

Question

我目前有一个带有两个不同选项卡的引导选项卡窗格.是否可以在带触摸屏的设备上支持滑动手势以在标签之间切换？我找到了大量的旋转木马库,但没有任何标签.

Answer 1

1. 转到http://jquerymobile.com/download-builder/,在Events中选择Touch.按"构建我的下载".下载档案.
2. 将jquery.mobile.custom.min.js从下载的存档添加到您的javascript文件夹中.现在我们支持touchstart,touchmove,touchend,tap,taphold,swipe,swipeleft,swiperight,scrollstart,scrollstop events.

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>