jQuery Plugin For Dynamic Bootstrap Tabs Component

A jQuery plugin to extend the Bootstrap's tabs component that allows you to dynamically add draggable and closable Bootstrap tabbed navigation just like the tabs in Chrome browser. Supports both static and AJAX content.

Dependencies:

• jQuery
• jQuery UI (Draggable)
• Bootstrap
• Font Awesome 4

Basic usage:

1. Include the Bootstrap Dynamic Tabs plugin into your Bootstrap project.

<link rel="stylesheet" href="/path/to/bootstrap-dynamic-tabs.css">
<script src="/path/to/bootstrap-dynamic-tabs.js"></script>

2. Create an empty container to place the dynamic tabs component.

<div id="tabs">
</div>

3. Add a default tab to the component.

var tabs = $('#tabs').bootstrapDynamicTabs()
tabs.addTab({
  title:'Home',
  text:'Home tab content',
  closable: false,
  ID: 'home'
});

4. Add a new tab with static content to the component.

tabs.addTab({
  title: 'HTML',
  html: 'HTML content is supported'
})

5. Add a new tab with AJAX content to the component.

tabs.addTab({
  title: 'AJAX',
  id: 'ajax',
  ajaxUrl: 'ajax/file.html',
  loadScripts: 'js/load.js',
  loadStyles: ['css/test.css','css/test2.css']
});

6. You can also add a Font Awesome icon to the tabs.

tabs.addTab({
  title: 'HTML',
  html: 'HTML content is supported',
  icon: 'fa fa-user'
})

7. Remove a tab by ID.

tabs.closeById('home');

8. Close current tab.

tabs.closeThis();

Change log:

2015-11-14

• Added closeThis() method.

2015-11-13

• Allows to remove tab by ID.

2015-11-12

• Middle click to close tabs.

---

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