Skip to main content

jQuery UI ScrollTabs




This is a jQuery UI widget build using UI widget factory. It extends the default jQuery UI tabs, so it is as customizable as default tabs widget. It extends the default widget behaviour with scrollable tabs feature, that always keeps ALL your tabs in a single line.

It handles all required markup enhancements within the widget create event, so it simply works on the default ui.tabs widget HTML structure.

View demo here

This plugin with scrollable tabs feature included, which helps you to keep all your tabs on single line. You can have multiple instances of the widget, as well as nest them as usual. It automatically handles showing the navigation controls like next, previous, first & last etc., based on user options. It watches the the device screen viewport changes and shows the nav controls automatically which makes it ideal for responsive/fluid pages.

This plugin has few optional dependencies, when found in the $.fn scope will be used to enhance the plugin features.

Following libraries are Required:

  • jQuery (tested in version 1.11+)
  • jQuery UI tabs (tested in 1.11 +)
Optional:
  • jQuery debounce plugin - throttle or debounce the events like resize, click etc., which avoids unwanted multiple executions.
  • jQuery Mousewheel - It allows mouse scroll for moving through the tab headers.

Basic Usage

Download the required scripts and style from the releases. Add it to your page <head> tag 

<!-- jQuery UI base css. Here I've included complete CSS for brevity -->
<link type="text/css" href="css/ui-lightness/jquery.ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>

<!-- Optionals starts -->
<script type="text/javascript" src="js/jquery.ba-throttle-debounce.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
<!-- Optional Ends -->

<script type="text/javascript" src="js/jquery-ui-1.11.4.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.scrolltabs.js"></script>

Initialization script


 $("#my-tabs").scrollTabs({
 // Normal tabs options
 active: 1,
 collapsible: true,
 // Extended Scrolltabs options
  scrollOptions: {
    animateTabs: false,
    showNavWhenNeeded: true,
    customNavNext: null,
    customNavPrev: null,
    customNavFirst: null,
    customNavLast: null,
    closable: true,
    easing: 'swing',
    loadLastTab: false,
    onTabScroll() {
      // empty
    },
    scrollSpeed: 500,
    selectTabOnAdd: true,
    selectTabAfterScroll: true,
    showFirstLastArrows:true,
    hideDefaultArrows: false,
    nextPrevOutward: false,
    wrapperCssClass: '',
    enableDebug: false,
    ....
  }
});
For more options & customization check out the documentation.

Plugin Development & Contributions

Pull request for new features or bug fixes with a proper information are welcome.

Technical background

This project uses
  • Gulp based build system
  • Typescript (TSLint)
  • Sass (Libsass)
  • BrowserSync
  • jQuery types (@types/jquery)
  • Vscode tasks and debug setting are preconfigured

Local development

So for local setup:
  1. download the master branch
  2. execute npm install
  3. use vscode Shift + Ctrl + B to build the project or execute using npm run build
  4. start live/dev server(Browser Sync) using command npm start
  5. start Visual Studio Code debug by using launch option Launch in Chrome with Localhost