Bootstrap Tabs Dynamic¶ ↑

A framework for adding, remove, renaming and in general handling Twitter Bootstrap Tabs through JavaScript.

Modified by Bowei:

1. Enhance the stability of tab assessment

2. Add functions ‘moveForward` and `moveBackward`

Examples¶ ↑

@nick322 has set up this exelent JS Fiddle: jsfiddle.net/0ua2gzyc/

Usage¶ ↑

Require the single JavaScript file.

Adding a new tab¶ ↑

tabs = $("ul.nav-tabs")
tabs.addBSTab("id_of_tab", "Tab title", "<b>Content</b>")

You can also add it by an element already defined (maybe as hidden?):

tabs.addBSTab("id_of_tab", "Tab title", $("#my_element_id"))

Removing a tab¶ ↑

tab = tabs.getBSTabByID("id_of_tab")
tab.removeBSTab()

Renaming a tab¶ ↑

tab = tabs.getBSTabByID("id_of_tab")
tab.renameBSTab("New title")

Getting the tab from a subelement within the tab.¶ ↑

a.click(function(){
  tab = $(this).currentBSTab()
})

Getting the tab ID from a subelement within the tab.¶ ↑

a.click(function(){
  tab_id = $(this).currentBSTabID()
})

(New) Moving tab forward/backward¶ ↑

tab = tabs.getBSTabByID("id_of_tab");
tab.moveForward(); //tab.moveBackward();

//Or use this to move tab till the 'bound' item
//使用此传入参数，可以设置向前移动的'界限'
tab.moveForward("idToForbid");