Responsive & Mobile-Aware jQuery Tabs Plugin For Bootstrap - droptabs

File Size: 6.83 KB
Views Total: 4222
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Responsive & Mobile-Aware jQuery Tabs Plugin For Bootstrap - droptabs

droptabs is a jQuery plugin that extends the Boostrap tabs component to display overflowed tabs in a dropdown list for small screen devices.

How to use it:

1. Include the jQuery library and jQuery droptabs plugin in the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="jquery.droptabs.js"></script>

2. Include the Twitter Boostrap 3 framework in the page.

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

3. Create the Html for a tabbed interface with plenty of tabs.

<div class="container-fluid ">
<ul class="nav nav-tabs droptabs">
<li class="active always-visible"><a href="#tab1" data-toggle="tab">Tab 1</a></li>
<li><a href="#tab2" data-toggle="tab">Tab 2</a></li>
<li><a href="#tab3" data-toggle="tab">Tab 3</a></li>
<li><a href="#tab4" data-toggle="tab">Tab 4</a></li>
<li><a href="#tab5" data-toggle="tab">Tab 5</a></li>
<li><a href="#tab6" data-toggle="tab">Tab 6</a></li>
<li class="always-visible"><a href="#tab7" data-toggle="tab">This is always visible</a></li>
<li class="dropdown pull-right"> <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
<li class="always-dropdown"><a href="#tab8" data-toggle="tab">Always in dropdown</a></li>
</ul>
</li>
</ul>
<div class="row-fluid ">
<div class="row-fluid">
<div class="tab-content span4">
<div class="tab-pane active" id="tab1">Content 1</div>
<div class="tab-pane" id="tab2">Content 2</div>
<div class="tab-pane" id="tab3">Content 3</div>
<div class="tab-pane" id="tab4">Content 4</div>
<div class="tab-pane" id="tab5">Content 5</div>
<div class="tab-pane" id="tab6">Content 6</div>
<div class="tab-pane" id="tab7">This is always visible</div>
<div class="tab-pane" id="tab8">Always in dropdown</div>
</div>
</div>
</div>
</div>

4. Call the plugin and we're done.

<script type="text/javascript">
$(".droptabs").droptabs();
</script>

5. Default options.

$(".droptabs").droptabs({

  // Jquery selector for the dropdown container.
  dropdownSelector : "li.dropdown", 

  // Jquery selector for the dropdown container (menu) that holds the elements (tabs).
  dropdownMenuSelector: "ul.dropdown-menu", 

  // Jquery selector for the elements (tabs).
  dropdownTabsSelector: "li", 

  // Jquery selector for the elements (tabs). This will only select elements under current container.
  visibleTabsSelector: ">li:not(.dropdown)", 

  // If needed, the Id of the div that holds the developer info can be changed.
  developmentId: "dt-devInfo", 

  // Wether to auto arrange tabs that are always visible in front of all other tabs.
  autoArrangeTabs: true, 

  // This enables a fixed developer div that shows some live info. Only for use in development mode.
  development: false 
  
});

Change log:

2017-09-02

  • Update the plugin to try to use the dropdown label from the DOM on-init
  • Added the ability to retrieve the HTML used for the dropdown label on initialization and use that whenever an item in the dropdown menu is not active instead of "Dropdown".  This includes the HTML used for the caret.

2014.07.21

  • Fix for Ajax loaded content

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