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

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.

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

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
  id: 'home',
  title: 'Home',
  url: "https://www.jqueryscript.net",
  active: true,
  allowClose: false
// or
  id: 'home',
  title: 'Home',
  content: 'This is home',
  active: true,
  allowClose: true

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

  id: 'menu-manage',
  title: 'Tab 1',
  active: false,
  content: 'Tab 1'
  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
// toggles tab
// locates tab
// closes tab
// closes other tabs
// closes all tabs
// gets steps
// gets active tab
// gets tab width
// gets tab list

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

  • Publication date: 17.10.2018
  • Source