Responsive Scrolling jQuery UI Tabs - jQuery ScrollTabs

Responsive Scrolling jQuery UI Tabs - jQuery ScrollTabs
File Size: 56.7 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

ScrollTabs is a lightweight jQuery plugin which makes the regular jQuery UI tabs responsive and scrollable with navigation arrows on small screens.

How to use it:

1. Load the necessary jQuery, jQuery UI and the jQuery UI ScrollTabs plugin in your document.

<link href="/path/to/jquery-ui.css" rel="stylesheet">
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery-ui.min.js"></script>
<script src="jquery.ui.scrolltabs.js"></script>

2. Load the following JavaScript libraries for better user experience (OPTIONAL).

<script src="jquery.ba-throttle-debounce.min.js"></script>
<script src="jquery.touchSwipe.min.js"></script>
<script src="jquery.mousewheel.min.js"></script>

3. Create a normal jQuery UI tabs component in the webpage.

<div id="example">
  <ul role="tablist">
    <li role="tab"><a href="#tabs-0-1" role="presentation">Tab 1</a></li>
    <li role="tab"><a href="#tabs-0-2" role="presentation">This is tab 2</a></li>
    <li role="tab"><a href="#tabs-0-3" role="presentation">This is tab number 3</a></li>
    ......
  </ul>
  <div id="tabs-0-1" role="tabpanel">
    Tab 1
  </div>
  <div id="tabs-0-2" role="tabpanel">
    Tab 2
  </div>
  <div id="tabs-0-3" role="tabpanel">
    Tab 3
  </div>
  ......
</div>

4. Initialize the plugin with default values.

$('#example').scrollTabs();

5. The required CSS styles for the scrollable tabs.

.ui-scroll-tabs-header:after {
  content: "";
  display: table;
  clear: both;
}

.ui-scroll-tabs-view {
  z-index: 1;
  overflow: hidden;
}

.ui-scroll-tabs-view .ui-widget-header {
  border: none;
  background: transparent;
}

.ui-scroll-tabs-header {
  position: relative;
  overflow: hidden;
}

.ui-scroll-tabs-header .stNavMain {
  position: absolute;
  top: 0;
  z-index: 2;
  height: 100%;
  opacity: 0;
  transition: left .5s, right .5s, opacity .8s;
  transition-timing-function: swing;
}

.ui-scroll-tabs-header .stNavMain button { height: 100%; }

.ui-scroll-tabs-header .stNavMainLeft { left: -250px; }

.ui-scroll-tabs-header .stNavMainLeft.stNavVisible {
  left: 0;
  opacity: 1;
}

.ui-scroll-tabs-header .stNavMainRight { right: -250px; }

.ui-scroll-tabs-header .stNavMainRight.stNavVisible {
  right: 0;
  opacity: 1;
}

.ui-scroll-tabs-header ul.ui-tabs-nav {
  position: relative;
  white-space: nowrap;
}

.ui-scroll-tabs-header ul.ui-tabs-nav li {
  display: inline-block;
  float: none;
}

.ui-scroll-tabs-header ul.ui-tabs-nav li.stHasCloseBtn a { padding-right: 0.5em; }

.ui-scroll-tabs-header ul.ui-tabs-nav li span.stCloseBtn {
  float: left;
  padding: 4px 2px;
  border: none;
  cursor: pointer;
}

6. Possible plugin options to customize the scrollable tabs.

$('#example').scrollTabs({
    scrollOptions: {
    closable: true,
    customGotoFirstHTML: '<button class="stNavFirstArrow ui-state-active" title="First">' +
        '<span class="ui-icon ui-icon-seek-first">First tab</span></button>',
    customMoveNextHTML: '<button class="stNavNextArrow ui-state-active" title="Next">' +
        '<span class="ui-icon ui-icon-seek-next">Next tab</span></button>',
    customGoToLastHTML: '<button class="stNavLastArrow ui-state-active" title="Last">' +
        '<span class="ui-icon ui-icon-seek-end">Last tab</span></button>',
    customMovePreviousHTML: '<button class="stNavPrevArrow ui-state-active" title="Previous">' +
        '<span class="ui-icon ui-icon-seek-prev">Previous tab</span></button>',
    easing: 'swing',
    enableDebug: false,
    headerHTML: '<div class="ui-widget-header ui-corner-all"/>',
    headerScrollHTML: '<div class="ui-scroll-tabs-view"/>',
    hideDefaultArrows: false,
    leftArrowWrapperHTML: '<div class="stNavMain stNavMainLeft"/>',
    loadLastTab: false,
    onTabScroll: function () {
        // empty
    },
    rightArrowWrapperHTML: '<div class="stNavMain stNavMainRight"/>',
    scrollSpeed: 500,
    selectTabAfterScroll: true,
    selectTabOnAdd: true,
    showFirstLastArrows: true,
    showNavWhenNeeded: true,
    wrapperCssClass: ''
  }
});

Change log:

2017-08-17

  • Removed dependency on jquery.swipe plugin and replaced it with the default/native scroll behaviour

2017-08-02

  • change to handle ui-tabs-selected css class changes for scrolltabs

2017-07-31

2017-07-25

  • Added mousewheel scroll for scrolling through tabs. Requires mousewheel jQuery plugin.

This awesome jQuery plugin is developed by davidsekar. For more Advanced Usages, please check the demo page or visit the official website.