The plugins site is currently in development.
We've been looking to provide a higher-quality, spam-free experience at the plugins site for some time, and a major error on our part forced us to shut down the current site before we could put the new one in place. We are developing a new site, and you can follow along with its development on GitHub. For more information about this transition, including steps you can take as a plugin author to prepare, please read our post about what's going on.
(mb)Tabset, choose your content and sort your tabs
organize your tabs!
A usefull component that let you build a tabbed interface really easily; ad you can sort your tab as you want!
DEPENDENCIES:
ui.core.js
ui.sortable.js
optional:
jquery.metadata.js
HOW DOES IT WORK:
here is the js call:
$("#tabset1").buildMbTabset({
sortable:true,
position:"left",
start:function(){},
stop:function(){}
});here is the code for each tabset:
<div class="tabset" id="tabset1">
<a id="a" class="tab {container:'cont_1'}">tab 1</a>
<a id="b" class="tab {container:'cont_2'}" >tab 2 con testo lungo</a>
<a id="c" class="tab disabled {container:'cont_3'}">tab 3</a>
<a id="d" class="tab {container:'cont_4'}" >tab 4</a>
</div>here is the code for each tabContent:
<div style="padding:10px" id="cont_1">
<h3>container 1</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>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 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 var tbset1_order= $(your tabset id).sortable("toArray") or $(your tabset id).sortable("serialize").
You can also switch a tabset between sortable or not by invoking:
$(<strong>your tabset id</strong><strong></strong>).setSortableMbTabset() to set sortable
or
$(<strong>your tabset id</strong>).clearSortableMbTabset(); to destroy sortable
