jquery mb.tabset

Schermata 2013-02-28 alle 19.49.57

keep your tabs ordered!

A useful component that let you build a tabbed interface really easily; ad you can even sort your tabs as you want!

see the demodownload it


How does it works:

here is the js call:

here is the code for each tabset:

here is the code for each tabContent:


  • sortable: (boolean) define if the tabs are sortable or not
  • position: (“left” or “right”) define the tabset position
  • start: (function) a callBack function on start sort
  • stop: (function) a callBack function on stop sort
  • to set a tab disable just add “disabled” to the tab class
  • to load tab content via ajax just add: class=”tab sel {content:’cont_1_2′, ajaxContent:’your ajax page url’, ajaxData: ‘data you want to send’}”

to store the new position of the tabs there’s a variable   $.mbTabset.mbTabsetArray  that returns an array with new tab position each time a sortable action is completed; this variable is cross tabset so the best is to store on stop event via ajax. You can also use the UI method via:

$(your tabset id).sortable("toArray")or$(your tabset id).sortable("serialize").


You can also switch a tabset between sortable or not by invoking:

$(your tabset id).setSortableMbTabset()  to set sortable
$(your tabset id).clearSortableMbTabset(); to destroy sortable