jquery mb.tabset

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!

How does it works:

here is the js call:

$("#tabset1").buildMbTabset({
sortable:true,
position:"left",
start:function(){},
stop:function(){}
});

$("#tabset1").buildMbTabset({

sortable:true,

position:"left",

start:function(){},

stop:function(){}

});

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>
</div>

<a id="b">tab 2 con testo lungo</a>

</div>

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>

<h3>container 2</h3> </div>

<h3>container 2</h3> </div>

<h3>container 3</h3></div>

<h3>container 4</h3></div>

Params

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
or
$(your tabset id).clearSortableMbTabset(); to destroy sortable

77 Responses

30 Javascript and CSS label switching Tabs effect Case Web Page Design | Web Page Design Templates | Html5 Template January 20, 2013 at 6:47 pm ·

[...] mb.tabset (jQuery) [...]
Junior August 2, 2012 at 4:22 pm · Reply →

How to navigate throug tabs using the buttons inside each tabs
1. Alex September 4, 2012 at 2:24 pm ·
  
  You cann’t to do this. You must choice another plugin.
Junior August 1, 2012 at 4:25 pm · Reply →

Hi There I would like to use buttons to help me navigate through the tabs. I know javascript but I’m not that familiar with ajax. Please help!!
JQUERY MB.TABSET | Resources | Front Inside June 5, 2012 at 3:56 pm ·

[...] http://pupunzi.open-lab.com/mb-jquery-components/mb-tabset/ [...]
kenanagkurt December 14, 2011 at 10:30 am · Reply →

can u help me about add my html web site
y8 games November 14, 2011 at 9:11 am · Reply →

Good. Thanks for sharing
yashmangupta August 24, 2011 at 11:31 am · Reply →

Hi,

Excellent plugin but want to ask whether can I use this plugin for commercial purposes free of charge or is there any cost associated to it.
kiarash June 23, 2011 at 5:47 pm · Reply →

Hi Matteo
If I want to have this ability for Telerik : RadTabStrip , what I need to do?
1. Matteo Bicocchi June 23, 2011 at 7:49 pm ·
  
  Hi kiarash,
  Sorry but I don’t know how RadTabStrip works…
  Bye,
  Matteo