twitter-bootstrap 为 Bootstrap 选项卡添加滑动支持
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28252089/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-10-21 22:15:41 来源:igfitidea点击:
Add Swipe Support for Bootstrap Tabs
提问by lukas81298
I currently have a bootstrap tab pane with two different tabs. Is it possible to support swipe gestures on devices with touch screens to switch between the tabs? I found tons of libraries for carousels but nothing for tabs.
我目前有一个带有两个不同选项卡的引导程序选项卡窗格。是否可以在带有触摸屏的设备上支持滑动手势以在选项卡之间切换？我发现了大量的旋转木马库，但没有找到标签库。
回答by Prof
- Go to http://jquerymobile.com/download-builder/, in Events select Touch. Press "Build my download". Download archive.
- Add jquery.mobile.custom.min.js from downloaded archive to you javascript folder. Now we have support for touchstart, touchmove, touchend, tap, taphold, swipe, swipeleft, swiperight, scrollstart, scrollstopevents.
Your 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>
- 转到http://jquerymobile.com/download-builder/，在 Events 中选择 Touch。按“构建我的下载”。下载存档。
- 将 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>
