jQuery (mb)Tabset 1.8 « Matteo Bicocchi’s Blog

jQuery (mb)Tabset 1.8

with 40 comments

mbtabset1

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!

demo page:

http://www.open-lab.com/mb.ideas/index.html#mbTabset

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.

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.

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 class="tabset" id="tabset1"> <a id="a" class="tab {content:'cont_1'}">tab 1</a> <a id="b" class="tab {content:'cont_2', ajaxContent:'yourAjaxPage.jsp', ajaxData:'a=1&b=2&...'}" >tab 2 con testo lungo</a> <a id="c" class="tab disabled {content:'cont_3'}">tab 3</a> <a id="d" class="tab {content:'cont_4'}" >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

Written by Matteo Bicocchi

April 1, 2009 at 10:54 pm

Posted in code, javascript, jquery

Tagged with jquery tabs, jquery tabset, mb tabs, mbTabset, sortable, sortable tabs, tabset

40 Responses

Subscribe to comments with RSS.

Hi,

First of all, thanks for your great job (^_^)

questionl:
Is there a way to fix a tab to a certain position while others are sortable?

use case:
- fixed home tab
- sortable optional tabs

Anh-Tuan

April 7, 2009 at 9:36 am

Reply
- Hi Anh,
  Ther’s no way at the moment to set a single ab not reorderable…
  I’ll work on it…
  bye,
  Matteo
  
  Matteo Bicocchi
  
  April 7, 2009 at 4:43 pm
  
  Reply
Hi, nice tabs ! Is possible to show a specific tab when loading the page ? IE when open your demo.html show the content of tab4 instead of tab1
Thank you

Gab

April 14, 2009 at 10:57 am

Reply
- Hi Gab,
  to show a specific tab:
  $(yourTabID).click();
  after initialize the tabset.
  
  Bye,
  Matteo
  
  Matteo Bicocchi
  
  April 14, 2009 at 11:35 am
  
  Reply
In both demos tab #3 does not work … Ah, I see you’ve set it to disabled.

Peter

April 15, 2009 at 9:37 am

Reply
- Hi Peter,
  yes, that’s the disabled example.
  bye,
  Matteo
  
  Matteo Bicocchi
  
  April 15, 2009 at 5:34 pm
  
  Reply
[...] DIRECT LINK » [...]

mbTabset | Feed Reader

April 16, 2009 at 5:01 am

Reply
Hi

This was really nice, but I was wondering: How do you disable and enable tabs in runtime?

Erik

April 28, 2009 at 7:35 am

Reply
- Hi Erik,
  
  At the moment you can’t enable or disable at runtime…
  I’ll implement this functionalitiy in next release,
  thnx,
  Matteo
  
  Matteo Bicocchi
  
  April 28, 2009 at 8:10 am
  
  Reply
Hi I was wondering if there is a way to change the overall width of the table that the content is in. If you go to the page I am trying to use it on:

http://www.bremertonstores.com/store/product1762.html

You will see what I mean. Is there a way to make it not so wide?

Thanks.

Ryan

May 21, 2009 at 9:36 pm

Reply
- Nevermind, I found it in the css folder.
  
  Ryan
  
  May 21, 2009 at 10:42 pm
  
  Reply
Is there a way to remove a border line on top in IE7? IE8 and FF are working OK but in IE7 border is always visible when the tab is selected.
Thanks

Nikola

May 23, 2009 at 7:50 pm

Reply
- Hi Nikola,
  that’s a little bug… to solve it just add “position:relative” to the class: .mbTabset, in the css file.
  Bye,
  Matteo
  
  Matteo Bicocchi
  
  May 24, 2009 at 8:43 am
  
  Reply
Hi Matteo,
that does the trick.
Thanks a lot
Nikola

Nikola

May 24, 2009 at 11:38 am

Reply
Hi Matteo,
The MBTabset 1.8 is great. Thanks for making it available. My page works as expected nicely on FF, with ajax and static contents.
However, for some reason, I have problem on IE7 (Your demo code works perfectly with IE7)
On IE7 my exact same code that works in FF shows only the tabs and then all the content DIVs where they are declared. It seems that the content DIVs are not associated with the tabs, since they all show up outside of the tabs and the tabs do not have contents.
What could be the cause of this IE7 strange behavior?
Thanks.
tom

Tom Nguyen

May 31, 2009 at 8:30 pm

Reply
- Found the problem. IE7 and Chrome do not like line break within the class attribute. I was generating something like
  
  TAB1
  
  The class attribute may not have a line break, eg.
  
  TAB1
  
  Thanks again Matteo. mbTabset is a great jquery plugin.
  
  Tom Nguyen
  
  June 1, 2009 at 4:04 am
  
  Reply
I was wondering what your license is for this code?

the link is broken from jquery. Before I implement it into a commercial site, wanted to make sure.

http://pupunzi.wordpress.com/2009/04/01/mbtabsetmbtabset/

Bryan Jowers

June 19, 2009 at 2:39 am

Reply
- Hi Bryan,
  all my components are under MIT license.
  Bye,
  Matteo
  
  Matteo Bicocchi
  
  June 19, 2009 at 12:39 pm
  
  Reply
is there any way to link from inside cont_1 div , so a iframe opens in the content area and without having a menu button?

andreas cederberg

June 23, 2009 at 12:33 pm

Reply
- Hi Andreas,
  Sorry but I don’t understand your needs…
  What do you mean by menu button?
  bye,
  Matteo
  
  Matteo Bicocchi
  
  June 23, 2009 at 6:07 pm
  
  Reply
Hi Matteo,
MBTabset 1.8 is great.

I have one question:

after initialize the tabset i will load in an ajax content, a other content via ajax with a simple link

it doesn’t work

thanks for help

peter

Peter

June 25, 2009 at 3:24 pm

Reply
- Hi Peter,
  How do you call the other content?
  could you send me your code to better understand your issue?
  bye,
  Matteo
  
  Matteo Bicocchi
  
  June 25, 2009 at 5:29 pm
  
  Reply
  - Hallo Matteo,
    
    thanks for answer.
    
    Tabset code:
    
    Test
    
    inside the test.html is a small picture with an description, on click on the image (or anything other) i will load a other file (test2.html) inside cont1.
    
    i have also create a div, called cont1_1 with a new js call.
    
    Do you understand?
    
    Thanks
    
    peter
    
    Peter
    
    June 25, 2009 at 6:09 pm
  - http://pastebin.com/m7d715842
    
    Peter
    
    June 25, 2009 at 6:21 pm
Sorry Matteo,

i’ve had an old file of tabset.js

I’ve updatet this.

now, it’s work.

Thank you very much.

mbtabset is great!

bye
peter

Peter

June 27, 2009 at 8:46 am

Reply
Sorry,

now, it’s work.

thank you very much.

peter

Peter

June 27, 2009 at 8:47 am

Reply
I am facing problem that when I run my file locally, just by opening the html file with ie or ff , ajax works fine, it fails to load.

Here is the link.

http://www-scf.usc.edu/~hsheth/myWebsite/hsother.html

trust me it works if u download all the files locally and run it with a browser.

Harsh

July 10, 2009 at 9:13 pm

Reply
- Hi Harsh,
  What kind of error do you get?
  I’m in holiday now and I’ve my computer broken so I can’t debug; did you try with a relative url instad of an absolute one?
  I’ll take a look at your cond as soon as I’ll have my computer back.
  Bye,
  Matteo
  
  Matteo Bicocchi
  
  July 11, 2009 at 10:20 am
  
  Reply
  - My URL is relative. I just cannot see the ajax content. It is always empty.
    
    Please check whenever possible.
    
    Thanks a ton Matteo. And yes, enjoy your holidays.
    
    Harsh
    
    July 11, 2009 at 4:33 pm
Hi

Just wanted to tell you that I used mbTabset for http://www.easypolls.net

Thanks for the plug-in! It looks so much better after I switched from the standard jQuery tabs.

Cheers

Erik-André Mamen

July 29, 2009 at 8:38 am

Reply
- Great Erik,
  happy to make you happier
  
  bye
  Matteo
  
  Matteo Bicocchi
  
  July 29, 2009 at 1:02 pm
  
  Reply
great plugin, works well on all browser.
thank you
great work

F.

SohoInteractive

August 3, 2009 at 4:30 pm

Reply
this is ridiculous! good job!

ryan

September 4, 2009 at 4:08 am

Reply
It’ worked

Thanks Matteo. It works fine now.
It seems it’s some kind of limitation on webhosting provider side.

Cheers
Rick

Rick

September 17, 2009 at 7:22 am

Reply
Hi Peter,
to change your tab content on the fly:
<!–if you want to change the content of a tab container just call this function:–>
<span onclick="$(‘#b’).mb_changeContent(‘content_3.html’,”);$(‘#b’).mb_drawAjaxContent();">change content</span>
<!– that cuold be set also in your ajax content –>

bye,
Matteo

Matteo Bicocchi

June 25, 2009 at 7:32 pm

Reply
Hallo Matteo,

thank you for your answer, but it doesn’t work.

I couldn’t find the function mb_changeContent an mb_drawAjaxContent in the js source.

I think, that’s the problem.

peter

Peter

June 27, 2009 at 8:34 am

Reply
Hi Harsh,
instead of writing:

var ajaxUrl1=”http://www-scf.usc.edu/~hsheth/myWebsite/hsnetworks.html”;
try:
var ajaxUrl1=”hsnetworks.html”;

that should work…

Another think I notice is that you are including jQuery 1.2.6 and you should include the 1.3.2 version instead for the UI components…

bye,
Matteo

Matteo Bicocchi

July 11, 2009 at 7:48 pm

Reply
I am doing that … did not help.

I think it is something else.

Harsh

July 13, 2009 at 9:08 pm

Reply
Hi all,

I’ve got the same problem. Ajax content is not loading.

It runs fine when testing on the machine.
Once i upload on the server ajax contents are not loaded.

Using Fiddler got to this:
>405 Method Not Allowed
>Method Not Allowed
>The requested method POST is not allowed for the URL

Any help?

Rick

September 16, 2009 at 3:51 pm

Reply
Hi rick,
This could be a server problem, anyway you can change the send method from POST to GET at line 279 of mbMenu.js.
Bye,
Matteo

Matteo Bicocchi

September 16, 2009 at 5:58 pm

Reply

Matteo Bicocchi’s Blog