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

jQuery (mb)Tabset 1.8

with 44 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

01/04/2009 at 10:54 pm

Posted in code, javascript, jquery

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

44 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

07/04/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
  
  07/04/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

14/04/2009 at 10:57 am

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

Peter

15/04/2009 at 9:37 am

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

mbTabset | Feed Reader

16/04/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

28/04/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
  
  28/04/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

21/05/2009 at 9:36 pm

Reply
- Nevermind, I found it in the css folder.
  
  Ryan
  
  21/05/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

23/05/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
  
  24/05/2009 at 8:43 am
  
  Reply
Hi Matteo,
that does the trick.
Thanks a lot
Nikola

Nikola

24/05/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

31/05/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
  
  01/06/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

19/06/2009 at 2:39 am

Reply
- Hi Bryan,
  all my components are under MIT license.
  Bye,
  Matteo
  
  Matteo Bicocchi
  
  19/06/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

23/06/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
  
  23/06/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

25/06/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
  
  25/06/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
    
    25/06/2009 at 6:09 pm
  - http://pastebin.com/m7d715842
    
    Peter
    
    25/06/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

27/06/2009 at 8:46 am

Reply
Sorry,

now, it’s work.

thank you very much.

peter

Peter

27/06/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

10/07/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
  
  11/07/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
    
    11/07/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

29/07/2009 at 8:38 am

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

F.

SohoInteractive

03/08/2009 at 4:30 pm

Reply
this is ridiculous! good job!

ryan

04/09/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

17/09/2009 at 7:22 am

Reply
Thanks for the great jQuery plugins!
I wonder if there is a way to specify that the tabs are pre-loaded one after another? Pre-loading would help to give users the perception that my application is fast. In the application, users will look at the tabs in an order. While they are looking at the first tab, the following tabs are pre-loaded, so that tab switching is instantly.

Tom Nygen

24/01/2010 at 2:00 pm

Reply
- Hi Tom,
  there are two methods to preload contents in your tab:
  
  1. you have $.fn.mb_changeContent();; this method set to the tab the url and tha DATA you need to load on it, but it doesn’t load the content.
  $('#MyTab').mb_changeContent('content_3.html','a=1&b=2');
  
  2. than $.fn.mb_drawAjaxContent() ; this method load the content specified into the tab without showing it; so, once you click on the tab the content is already loaded.
  $('#MyTab').mb_drawAjaxContent();
  
  So you can call them sequencially for all your Ajax tabs to obtain your issue:
  $('#MyTab').mb_changeContent('content_3.html','a=1&b=2');
  $('#MyTab').mb_drawAjaxContent();
  
  Hope this helps you,
  bye
  Matteo
  
  Matteo Bicocchi
  
  24/01/2010 at 2:30 pm
  
  Reply
Hi Matteo,

Great plugin! It is great to be able to deliver a tab set such as this on my intranet page.

But I am having a problem with Ajax content or I believe it is ajax. And it is on IE8…
Each one of my tabs refers to other pages through ajax but as soon as I go to another tab I get the error:
” ‘theform.elements.length’ is Null or not an object”.
If I ignore the error and go back and forth through the tabs I eventually get an error box stating:

SysFader:iexplorer.exe – App;ication Error
The instruction at “an address” referenced memory at “that address”. The memory could not be “written”.

Funny enough (or not funny) I have tried it using FF and there is no problem. But I need to have it working in I.E..

Would you have any suggestions?

cheers
Glen

Glen

11/03/2010 at 6:06 am

Reply
- Hi Glen,
  Can you be more specific with the javascript error?
  can you inspect the code with the Developer Tool of IE8?
  That could be helpful to understand the error type and if it depends by the Ajax or maybe by some HTML code that get broken by the Ajax call…
  Bye
  Matteo
  
  Matteo Bicocchi
  
  11/03/2010 at 10:54 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

25/06/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

27/06/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

11/07/2009 at 7:48 pm

Reply
I am doing that … did not help.

I think it is something else.

Harsh

13/07/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

16/09/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

16/09/2009 at 5:58 pm

Reply

Matteo Bicocchi's Blog