Question

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

Answer 1

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

你的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>

为Bootstrap选项卡添加滑动支持

1 个答案: