Dynamic Tabs Creation Plugin With jQuery And Bootstrap - nth-tabs

nth-tabs is a jQuery plugin used to dynamically manage (create, delete, switch) tabs & tabbed content on the webpage just like a browser.

Supports both iframe content and static HTML content. Based on the Bootstrap's tabs component.

How to use it:

1. To get started, install jQuery library and Bootstrap framework on the webpage.

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

2. Load the jQuery nth-tabs plugin's files in the webpage.

<!-- core -->
<link href="css/nth-tabs.min.css" rel="stylesheet">
<!-- icon -->
<link href="css/nth-icons.min.css" rel="stylesheet">
<!-- JS -->
<script src="js/nth-tabs.js"></script>

3. Add the 'nth-tabs' class to the container element in which you want to place the tabs.

<div class="nth-tabs" id="example">
</div>

4. Call the function on the conainer element to initialize the nth-tabs.

nthTabs = $("#example").nthTabs();

5. Add a new tab to the nth-tabs interface.

// iframe
nthTabs.addTab({
  id: 'home',
  title: 'Home',
  url: "https://www.jqueryscript.net",
  active: true,
  allowClose: false
});

// or
nthTabs.addTab({
  id: 'home',
  title: 'Home',
  content: 'This is home',
  active: true,
  allowClose: true
});

6. Add multiple tabs to the nth-tabs interface.

nthTabs.addTab({
  id: 'menu-manage',
  title: 'Tab 1',
  active: false,
  content: 'Tab 1'
}).addTab({
  id: 'role-manage',
  title: 'Tab 2',
  active: false,
  content: 'Tab 2'
});

7. Customize the nth-tabs interface by overriding the following settings.

nthTabs = $("#example").nthTabs({

  // is closable?
  allowClose: true,

  // is active?
  active: true,

  // auto locate
  location: true

  // enable fadeIn effect
  fadeIn: true

  // scrollable width
  rollWidth: nthTabs.width() - 120
  
});

8. More API methods to control the nth-tabs interface.

// sets activte tab
nthTabs.setActTab('tab-id');

// toggles tab
nthTabs.toggleTab('tab-id');

// locates tab
nthTabs.locationTab('tab-id');

// closes tab
nthTabs.delTab('tab-id');

// closes other tabs
nthTabs.delOtherTab();

// closes all tabs
nthTabs.delAllTab();

// gets steps
nthTabs.getMarginStep();

// gets active tab
nthTabs.getActiveId();

// gets tab width
nthTabs.getAllTabWidth();

// gets tab list
nthTabs.getTabList();

Changelog:

2019-03-20

• Bugfix

2018-12-29

• Fixed scrollbar

---

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