« jQuery LightboxjQuery Tooltips »

jQuery Tabs

27 June 2006 | Tutorials | 10 Comments

From the creator of "15 Days of jQuery" (me):

A fellow named Klaus has created a nifty little plugin that creates accessible unobtrusive javascript tabs using jQuery.

With the correct (x)HTML and CSS you can create tabs as easily as 

$.tabs("container"); // first tab on by default

If you want to have the second tab “on” by default:

$.tabs("container", 2); // second tab on

Klaus has an example that you can view to see the end result.

My Contribution

I had to do something to add to Klaus’ contribution so I came up with a simple form that you can use to generate the markup for the tabs.

Instructions:

It’s very simple. Just type a name for each tab (up to 5) and click the button at the bottom of the form. The next page will generate the html you can copy and paste into your file.

You will also need to download the CSS from Klaus’ site, modify it as you see fit, and of course upload the jQuery javascript library to your server.

Here is the link for the tab markup generator.

Enjoy.

Share and Enjoy:These icons link to social bookmarking sites where readers can share and discover new web pages.

Subscribe

Email Updates:
Email:
RSS Feed:

RSS information | Email Policy | RSS to Email by Aweber

10 Comments

  1. Klaus Hartl said on 27 Jun 2006 at 11:24 am:

    Thank you Jack, this is very neat!

    I just wanted to mention that I have revised the plugin lately so that it conforms to the proposed jQuery plugin construct.

    This means that the syntax slightly changed: $('#container').tabs();

    This also means that one can now use jQuery’s capability to find elements in the DOM tree (and need not to rely on an id) and also chain methods.

  2. Jack said on 27 Jun 2006 at 12:02 pm:

    Klaus,
    Glad you stopped by!

    I’ll work up an update to my xhtml generator and post it soon.

  3. Olle Jonsson said on 20 Jul 2006 at 11:34 am:

    Not to be farting at the party, but when I tried to enter the first tab, I wanted to use my name.

    I mistyped “oööe” (O’s with two dots, instead of L’s in the middle), and the script was unable to find the tab named so. Crazy/Scandinavian characters in the tab names are thus out of the question here.

    (Using WinXP, Firefox.)

  4. denny said on 29 Sep 2007 at 12:58 pm:

    how can i fetch different rss feed on each tabs??

    tia

  5. 37+ Great Ajax, CSS Tab-Based Interfaces said on 21 Feb 2008 at 10:40 am:

    […] 15daysofjquery- jQuery Tabs A simple form that you can use to generate the markup for the […]

  6. Recursos y Tutoriales » Blog Archive » Menus basados en Css y Ajax muy buenos said on 22 Feb 2008 at 7:30 am:

    […] 15daysofjquery- jQuery Tabs A simple form that you can use to generate the markup for the […]

  7. fishilonely said on 11 Apr 2008 at 3:42 pm:

    Looks amazing. BTW,Do you have mouse move over TAB?

  8. Jonah Dempcy said on 23 Apr 2008 at 8:23 pm:

    My colleague Alex wrote his version of jQuery tabs. It’s online at this address:

    http://www.thetruetribe.com/2008/04/how-do-i-make-tabs-in-jquery-without-jq.html

    Check it out and let me know what you think!

  9. Thomas Godoj said on 2 Jun 2008 at 8:08 am:

    Thanks.. nice Tabs

  10. 37个Ajax和CSS实现的Tab选项卡切换效果界面 | CodeLog said on 6 Jun 2008 at 3:53 am:

    […] 15daysofjquery- jQuery Tabs […]

Leave a Reply

You can follow the discussion through the Comments feed. You can also pingback or trackback from your own site.