Tab Panels Swipe-able In Mobile View?
I have a tabbed menu and I want the tabbed menu (the ul class='tabs') to be swipe-able in mobile view. EDIT: I found a snippet on using Slick JS, I never knew about this JS but I w
Solution 1:
If all you want to do is swipe horizontally on a menu, to reveal any other nav items not visible in the viewport, you can do that with css.
@media screen and (max-width: 768px) {
.tabs {
overflow-x: scroll;
white-space: nowrap;
}
}
Solution 2:
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.
See this sample:
<!DOCTYPE html><html><head><metaname="viewport"content="width=device-width, initial-scale=1"><linkrel="stylesheet"href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"><scriptsrc="https://code.jquery.com/jquery-1.11.3.min.js"></script><scriptsrc="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><divdata-role="page"id="pageone"><divdata-role="header"></div><divdata-role="main"class="ui-content"><pstyle="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>
Post a Comment for "Tab Panels Swipe-able In Mobile View?"