jQuery Plugins › jQuery Other Plugins › Bootstrap Scrolling Tabs

jQuery Plugin To Create Responsive Scrolling Bootstrap Tabs

File Size:	53.7 KB
Views Total:	59164
Last Update:	03/22/2021 00:16:00 UTC
Publish Date:	02/06/2016 04:23:22 UTC
Official Website:	Go to website
License:	MIT

Demo Download

Basic usage:

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

<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.

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist" style="display: none">
  <li class="nav-item"><a class="nav-link active" href="#tab1" role="tab" data-toggle="tab">Tab Number 1</a></li>
  <li class="nav-item"><a class="nav-link" href="#tab2" role="tab" data-toggle="tab">Tab Number 2</a></li>
  <li class="nav-item dropdown">
    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Tab 3 Dropdown<span class=caret></span></a>
    <ul class="dropdown-menu">
      <li><a class="nav-link" href="#tab3a" role="tab" data-toggle="tab">Tab 3a</a></li>
      <li><a class="nav-link" href="#tab3b" role="tab" data-toggle="tab">Tab 3b</a></li>
      <li><a class="nav-link" href="#tab3c" role="tab" data-toggle="tab">Tab 3c</a></li>
      <li role="separator" class="divider"></li>
      <li><a class="nav-link" href="#">Separated link</a></li>
    </ul>
  </li>
  <li class="nav-item"><a class="nav-link" href="#tab4" role="tab" data-toggle="tab">Tab Number 4</a></li>
  <li class="nav-item"><a class="nav-link" href="#tab5" role="tab" data-toggle="tab">Tab Number 5</a></li>
  <li class="nav-item"><a class="nav-link" href="#tab6" role="tab" data-toggle="tab">Tab Number 6</a></li>
  <li class="nav-item"><a class="nav-link" href="#tab7" role="tab" data-toggle="tab">Tab Number 7</a></li>
  <li class="nav-item"><a class="nav-link" href="#tab8" role="tab" data-toggle="tab">Tab Number 8</a></li>
  <li class="nav-item dropdown">
    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Tab 9 Dropdown<span class=caret></span></a>
    <div class="dropdown-menu">
      <a class="dropdown-item nav-link" href="#tab9a" role="tab" data-toggle="tab">Tab 9a</a>
      <a class="dropdown-item nav-link" href="#tab9b" role="tab" data-toggle="tab">Tab 9b</a>
      <a class="dropdown-item nav-link" href="#tab9c" role="tab" data-toggle="tab">Tab 9c</a>
    </div>
  </li>
  <li class="nav-item"><a class="nav-link" href="#tab10" role="tab" data-toggle="tab">Tab Number 10</a></li>
  <li class="nav-item"><a class="nav-link" href="#tab11" role="tab" data-toggle="tab">Tab Number 11</a></li>
  <li class="nav-item"><a class="nav-link" href="#tab12" role="tab" data-toggle="tab">Tab Number 12</a></li>
  <li class="nav-item"><a class="nav-link" href="#tab13" role="tab" data-toggle="tab">Tab Number 13</a></li>
  <li class="nav-item"><a class="nav-link" href="#tab14" role="tab" data-toggle="tab">Tab Number 14</a></li>
  <li class="nav-item"><a class="nav-link" href="#tab15" role="tab" data-toggle="tab">Tab Number 15</a></li>
  <li class="nav-item"><a class="nav-link" href="#tab16" role="tab" data-toggle="tab">Tab Number 16</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content" style="display: none">
  <div role="tabpanel" class="tab-pane fade show active" id="tab1">Tab 1 content...</div>
  <div role="tabpanel" class="tab-pane fade show" id="tab2">Tab 2 content...</div>
  <div role="tabpanel" class="tab-pane fade show" id="tab3">Tab 3 content...</div>
  <div role="tabpanel" class="tab-pane fade show" id="tab3a">Tab 3a content...</div>
  <div role="tabpanel" class="tab-pane fade show" id="tab3b">Tab 3b content...</div>
  <div role="tabpanel" class="tab-pane fade show" id="tab3c">Tab 3c content...</div>
  <div role="tabpanel" class="tab-pane fade show" id="tab4">Tab 4 content...</div>
  <div role="tabpanel" class="tab-pane fade show" id="tab5">Tab 5 content...</div>
  <div role="tabpanel" class="tab-pane fade show" id="tab6">Tab 6 content...</div>
  <div role="tabpanel" class="tab-pane fade show" id="tab7">Tab 7 content...</div>
  <div role="tabpanel" class="tab-pane fade show" id="tab8">Tab 8 content...</div>
  <div role="tabpanel" class="tab-pane fade show" id="tab9">Tab 9 content...</div>
  <div role="tabpanel" class="tab-pane fade show" id="tab9a">Tab 9a content...</div>
  <div role="tabpanel" class="tab-pane fade show" id="tab9b">Tab 9b content...</div>
  <div role="tabpanel" class="tab-pane fade show" id="tab9c">Tab 9c content...</div>
  <div role="tabpanel" class="tab-pane fade show" id="tab10">Tab 10 content...</div>
  <div role="tabpanel" class="tab-pane fade show" id="tab11">Tab 11 content...</div>
  <div role="tabpanel" class="tab-pane fade show" id="tab12">Tab 12 content...</div>
  <div role="tabpanel" class="tab-pane fade show" id="tab13">Tab 13 content...</div>
  <div role="tabpanel" class="tab-pane fade show" id="tab14">Tab 14 content...</div>
  <div role="tabpanel" class="tab-pane fade show" id="tab15">Tab 15 content...</div>
  <div role="tabpanel" class="tab-pane fade show" id="tab16">Tab 16 content...</div>
</div>

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

$('.nav-tabs').scrollingTabs({
  // options here
});

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

var tabs = [
    { paneId: 'tab00', tooltip: 'Custom Tooltip Tab 0',  title: 'Tab Index 0', content: 'Tab Index 0 Content', active: true, disabled: false },
    { paneId: 'tab01', tooltip: 'Custom Tooltip Tab 1',  title: 'Tab Index 1', content: 'Tab Index 1 Content', active: false, disabled: false },
    { paneId: 'tab02', tooltip: 'Custom Tooltip Tab 2',  title: 'Tab Index 2', content: 'Tab Index 2 Content', active: false, disabled: false },
    // ...
],

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

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
  // 4 or 3
  bootstrapVersion: 3,

  // set to true if you experience a situation where the right scroll arrow wraps to the next line due to a vertical scrollbar coming into existence on the page after the plugin already calculated its width without a scrollbar present. 
  handleDelayedScrollbar: false
  
});

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. Destroy the plugin.

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

Changelog:

2020-03-22

Updated for Bootstrap 4 and jQuery 3.

v2.6.1 (2019-04-05)

Fixes an issue in which a tab clicked before you invoke the scrollingTabs plugin on the tabs will no longer be clickable after the plugin is invoked.

v2.6.1 (2019-04-05)

Fixes an issue in which a tab clicked before you invoke the scrollingTabs plugin on the tabs will no longer be clickable after the plugin is invoked.

v2.6.0 (2019-03-05)

Add handleDelayedScrollbar option

2018-01-30

Use constant for click-target class

2017-12-04

Add tabsPostProcessors feature

2017-10-25

Add small device support when using Bootstrap 4

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.

jQuery Plugin To Create Responsive Scrolling Bootstrap Tabs

See also:

Basic usage:

Changelog:

Related jQuery Plugins

You Might Also Like

Add Your Review