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!
http://pupunzi.com/#mb.components/mb.tabset/tabset.html
download page:
http://mbideasproject.googlecode.com/files/jquery.mbTabset.1.9.zip
jQuery project page:
http://plugins.jquery.com/project/mbTabset
Releases:
1.8 (New!)
minor bugfix:
Now the Ajax content is call just if the tab is the one visible or if you click on it.
Dependencies:
ui.core.js
ui.sortable.js
optional:
jquery.metadata.js
How does it works:
here is the js call:
$("#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>
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>
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
History:
1.7
Major bugfix:
- Fixed a bug that prevent to send ajaxData with the ajax call option.
1.6
Major issues:
- added the possibility to choose the startup tab :
if you need to start with a different tab than the first just add a “sel” class to the a attrubute of your tab:
class=”tab sel {content:’cont_1_2′}”
1.5
Major issues:
- added the possibility to load ajax content.
You now can pass other two params:- ajaxContent, containing the url of your ajax page
- ajaxData, containing the params to pass
- even if your tab content is called via ajax you have to specify the “content” param with the ID, needed to build the container for the ajax conent
I had to chang the html code to simplify the tabset constructor:
- the param called “container” now is “content“
- now it’s not anymore needed the wrapper div of each tabset contents with class “mbTabsetContainer”
- the tab contents can be written everywhere in the page
1.0
first release.
Hi,
first of all, you did a great job with this plugin.
I would like to know if there is a way to make a link from another page to a tab page on a specific Tab which is not the sel one ?
Jean-Philippe
06/10/2009 at 11:40 am
Hi Jean-Philippe,
I’ve no methods built in to do such things but you could build your own function:
A. call your page adding an anchor pointing to the ID of your tab:
http://yourSite.fr/yourPage.html#yourTabIDB. in the page add a function that split the location.href, get the ID of the tab, open the tab:
$(function(){
function openTab(){
var myTab= self.location.href.split("#")[1];
$("#"+myTab).click();
}
});
That should open the tab you required.
Bye,
Matteo
Matteo Bicocchi
06/10/2009 at 5:23 pm
Great, it works perfectly.
You only forget a quote in the line var myTab…, it is :
….split(“#”) and not split(“#)
Thanks a lot
Jean-Philippe
07/10/2009 at 8:49 am
Hi Matteo,
great plugin!
Is it possible to have scrollbars just on the mbTabsetContainer pane? One on the right side and one on the bottom. This is e.g. for scrolling a pic that is 3000px wide and 3000px high. I have tried 100% height at various places, but no success.
-Sebastian
sebastian
13/10/2009 at 10:14 am
Hi Sebastian,
you can set this properties by modifying the .mbTabsetContainer CSS class: add a fixed width, a fixed height and set the overflow to “auto”.
Bye,
Matteo
Matteo Bicocchi
13/10/2009 at 5:53 pm
Hi Matteo, the link I put on Website is my problem.
Well, I try to put one table inside a tab and if you click in my link http://www.flast.com.br/succimais.htm you will see the table out of tab. When I put the same links without a table it works, but inside a table does not…
How can I fix this problem? Tks for support!
Eric Viana
18/10/2009 at 9:31 pm
Hi Eric;
Opening your page into an Editor it higlights some HTML errors (tables that doesn’t close; close div TAG without OPEN…) and that causes your problem…
I’ve no time to verify where exactly are your error, but if you reformat the HTML I’m shure it will work.
Bye,
Matteo
Matteo Bicocchi
19/10/2009 at 2:07 pm
hi
we would love to have a tutorial from u some day
u have excellent work
thnx
banny
20/10/2009 at 9:59 am
Is there any chance that we can see a tab design which only consists of single containers?
Noah
28/11/2009 at 5:55 pm
Hi
Nice plugin. a couple of issues:
I am using it with Oracle APEX. I tried setting one of the divisions to use an Oracle stored procedure which prints out a google map…the whole page went into an endless loop. any ideas?
also could you provide with concrete example for the ajax web source of a tab? say I want to call a procedure thats on http://somehost:someport/apex/proc123 and this procedure takes parameters p1 and p2….how would I call it?
George
14/12/2009 at 3:27 pm