Responsive Scrolling jQuery UI Tabs - jQuery ScrollTabs

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

• Updated options.

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.