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:

<div id="tabset1">
<a id="a">tab 1</a>
<a id="b">tab 2 con testo lungo</a>
<a id="c">tab 3</a>
<a id="d">tab 4</a>

here is the code for each tabContent:

 <div style="padding:10px" id="cont_1">
<h3>container 2</h3> </div>
<div style="padding:10px" id="cont_2">
<h3>container 2</h3> </div>
<div style="padding:10px" id="cont_3">
<h3>container 3</h3></div>
<div style="padding:10px" id="cont_4">
<h3>container 4</h3></div>


  • 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