jQuery Plugin To Create Responsive Scrolling Bootstrap Tabs

jQuery Plugin To Create Responsive Scrolling Bootstrap Tabs
File Size: 84.7 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

A tiny jQuery plugin for responsive Bootstrap 3/4 tabs component that makes your Bootstrap tab navigation scrollable when there's no enough screen space to display all tabs.

See also:

Basic usage:

1. Load both jquery.scrolling-tabs.min.css and jquery.scrolling-tabs.min.js in your Bootstrap web project like this:

<link href="jquery.scrolling-tabs.css" rel="stylesheet">
<script src="jquery.scrolling-tabs.js"></script>

2. Create tab navigation and tab panes following the native Bootstrap tabs' markup structure.

<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
  </div>

</div>

3. Just call the function on the tab navigation and you're done.

$('.nav-tabs').scrollingTabs();

4. You're also allowed to add tabs data via JavaScript like this:

var tabsData = [
  { paneId: 'tab01', title: 'Tab <em>1</em> of 12', content: 'Tab Number 1 Content', active: true, disabled: false },
  { paneId: 'tab02', title: 'Tab 2 of 12', content: 'Tab Number 2 Content', active: false, disabled: false },
  { paneId: 'tab03', title: 'Tab 3 of 12', content: 'Tab Number 3 Content', active: false, disabled: false },
  { paneId: 'tab04', title: 'Tab 4 of 12', content: 'Tab Number 4 Content', active: false, disabled: false },
  { paneId: 'tab05', title: 'Tab 5 of 12', content: 'Tab Number 5 Content', active: false, disabled: false }
];

$('#tabs-container').scrollingTabs({
  tabs: tabsData
});

5. Default plugin options.

$('.nav-tabs').scrollingTabs({

  // tabs data array
  tabs: null,

  // name of your tab object's property name that corresponds to that required tab property if  your property name is different than the standard name (paneId, title, etc.)
  propPaneId: 'paneId',
  propTitle: 'title',
  propActive: 'active',
  propDisabled: 'disabled',
  propContent: 'content',

  // relevant for data-driven tabs only--set to true if you want the plugin to only touch the tabs and to not generate the tab pane elements that go in .tab-content. 
  // By default, the plugin will generate the tab panes based on the content property in your tab data, if a content property is present.
  ignoreTabPanes: false,

  // set to true if you want to force full-width tabs to display at the left scroll arrow. i.e., if the scrolling stops with only half a tab showing, it will snap the tab to its edge so the full tab shows.
  scrollToTabEdge: false,

  // On tabs data change, if you want the active tab to be set based on the updated tabs data (i.e., you want to override the current active tab setting selected by the user)
  forceActiveTab: false

  // set to true if you want the left scroll arrow to disable when the tabs are scrolled fully left, and the right scroll arrow to disable when the tabs are scrolled fully right.
  disableScrollArrowsOnFullyScrolled: false,

  // set to true if you want the left scroll arrow to slide the tabs left instead of right, and the right scroll arrow to slide the tabs right.
  reverseScroll: false,

  // set to a value less than 1 if you want the tabs container to be less than the full width of its parent element. 
  // For example, set it to 0.5 if you want the tabs container to be half the width of its parent.
  widthMultiplier: 1,

  // A callback function to execute any time a tab is clicked.
  // The function is simply passed as the event handler to jQuery's .on(), so the function will receive the jQuery event as an argument, and the 'this' inside the function will be the clicked tab's anchor element.
  tabClickHandler: null,

  // Arrow class options
  cssClassLeftArrow: 'glyphicon glyphicon-chevron-left',
  cssClassRightArrow: 'glyphicon glyphicon-chevron-right'

  // Custom HTML string for the left and right scroll arrows. 
  // This will override any custom cssClassLeftArrow and cssClassRightArrow settings.
  leftArrowContent: '',
  rightArrowContent: '',

  // Enable swiping?
  enableSwiping: false,

  // Enable RTL?
  enableRtlSupport: false,

  // Optional string array used to define custom HTML for each tab's <li> element. 
  // Each entry is an HTML string defining the tab <li> element for the corresponding tab in the tabs array.
  tabsLiContent: null,

  // Optional array of functions, each one associated with an entry in the tabs array. 
  // When a tab element has been created, its associated post-processor function will be called with two arguments: the newly created $li and $a jQuery elements for that tab.
  // This allows you to, for example, attach a custom event listener to each anchor tag.
  tabsPostProcessors: null,

  // Bootstrap version
  bootstrapVersion: 3
  
});

6. API methods.

// destroy the plugin
$('#el').scrollingTabs('destroy');

// refresh the plugin
$('#el').scrollingTabs('refresh');

// scroll to the active tab
$('#el').scrollingTabs('scrollToActiveTab');

7. The plugin triggers event 'ready.scrtabs' when the tabs have been wrapped in the scroller and are ready for viewing:

$('.nav-tabs')
  .scrollingTabs()
  .on('ready.scrtabs', function() {
   // tabs ready, do my other stuff...
});

$('#tabs-inside-here')
  .scrollingTabs({ tabs: tabs })
  .on('ready.scrtabs', function() {
   // tabs ready, do my other stuff...
});

8. Destroying:

$('.nav-tabs').scrollingTabs('destroy');

Change log:

2018-01-30

  • Use constant for click-target class

2017-12-04

  • Add tabsPostProcessors feature

2017-10-25

2017-10-02

  • Fix scrollToActiveTab for RTL mode

2017-08-25

  • Added RTL support.

2017-08-23

  • Fix window resize when multiple instances on page

2017-08-09

  • Control swiping via code rather than scrollbar

2017-07-27

  • Fix tab disabled toggle not working

2017-07-26

  • Add leftArrowContent, rightArrowContent options

2017-06-04

  • Enable swiping

2017-05-12

  • Revert from boundingClientRect to $.outerWidth()

2017-02-24

  • prevent multiple window resize event listeners

2017-02-14

  • allow override scss variables

2017-02-09

  • add arrow class option

2017-02-06

  • add tab click callback option

2017-01-22

  • add touchstart and touchend support

2016-12-23

  • fixing some width and position issues

2016-11-10

  • hide scroll arrows on page load if they are not needed

2016-10-29

  • add scrollToActiveTab method

2016-09-19

  • add support for tabs with dropdowns

2016-09-11

  • Add disableScrollArrowsOnFullyScrolled option

2016-07-26

  • hide tabs and scroller till rendering is complete

2016-07-06

  • Allow force refresh on static tabs also, not just data-driven tabs

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