标签面板可在移动视图中滑动吗? [英] Tab panels swipe-able in mobile view?
问题描述
我有一个选项卡式菜单，我希望该选项卡式菜单(ul class="tabs")在移动视图中可滑动.
I have a tabbed menu and I want the tabbed menu (the ul class="tabs") to be swipe-able in mobile view.
编辑:我发现了一个使用 Slick JS 的代码段，我从不了解此JS，但我希望它应用此
I found a snippet on using Slick JS, I never knew about this JS but I want it to apply this codepen on my current tabbed menu.
如何与当前的选项卡式菜单正确结合?我尝试将其合并，但选项卡式菜单的当前UI设计变得一团糟.
How to combine with my current tabbed menu properly? I tried to combine it but the current UI design of my tabbed menu getting messed up.
这是我的选项卡式菜单的 codepen
Here's my codepen of tabbed menu
<section class="wrapper">
<ul class="tabs">
<li class="active"><span class="icons-tabbed icon-icon-tab-locator">Tab 1</span></li>
<li><span id="partner-store" class="icons-tabbed icon-icon-tab-howto">Tab 2</span></li>
<li><span id="partner-store" class="icons-tabbed icon-icon-tab-howto">Tab 3</span></li>
</ul>
<ul class="tab__content">
<li class="active">
<div id="tab1" class="content__wrapper">
</div>
</li>
推荐答案
使用jquery.mobile.这是您理想的选择.我写了一个样例.接下来，您需要将轻扫事件与单击选项卡绑定.我建议您使用next()进行右侧滑动，使用prev()进行左侧滑动来定位标签.
Use jquery.mobile. This is ideal for your purpose. I wrote a sample of how it works. What you will have to do next is to bind the swipe event with your click tabs. I suggest you use next() for the right swipe and prev() for left swipe to target the tabs.
查看此示例:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).on("pagecreate","#pageone",function(){
$("p").on("swipeleft",function(){
alert('swiped left');
});
$("p").on("swiperight",function(){
alert('swiped right');
});
});
</script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
</div>
<div data-role="main" class="ui-content">
<p style="background:red; height:250px; font-size:50px">If you swipe me in the left or right, an event will be triggered.</p>
</div>
</div>
</body>
</html>
这篇关于标签面板可在移动视图中滑动吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
