jTabber for jQuery
First off, Merry Christmas! For those of you who feel that I'm scrouge for not giving you anything for Christmas, well I'm about to prove you wrong. I spent a few hours on Christmas eve building a little tabbed menu script. I built it with the jQuery framework and I call it 'jTabber'. It allows you to scroll through content by clicking on tabs, without the page having to reload. The content is already on the page, you just need some javascript to tell it to display. It's very flexible in what you're wanting to do with it.
Last updated: Feb 24, 2008
The script requires the latest version of jQuery (included 1.2).
Usage
Attach the following lines in the head of your document.
<script type="text/javascript" src="jtabber.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.jtabber({
mainLinkTag: "#nav a", // much like a css selector, you must have a 'title' attribute that links to the div id name
activeLinkClass: "selected", // class that is applied to the tab once it's clicked
hiddenContentClass: "hiddencontent", // the class of the content you are hiding until the tab is clicked
showDefaultTab: 1, // 1 will open the first tab, 2 will open the second etc. null will open nothing by default
showErrors: true, // true/false - if you want errors to be alerted to you
effect: 'slide', // null, 'slide' or 'fade' - do you want your content to fade in or slide in?
effectSpeed: 'fast' // 'slow', 'medium' or 'fast' - the speed of the effect
})
})
</script>
Also, include the CSS in the head that is with the example.
Parameters
mainLinkTag: (id or class followed by an anchoring tag) The name of your nav div holding the anchors. In this case we're using #nav a. This is targetting all the <a> tags inside the div with the id nav (#nav). If you change this you must make sure you have a 'title' attribute on your anchor that points to the div that you want to open. You can use 'ul li' instead of '#nav a' if you want, you just have to make sure you have a title attribute on your li tag, like this <li title="divname"> Im opening the content with the id of 'divname'</li>
activeLinkClass: (class name) The class you want to assign the anchor when it's clicked. The default class is 'selected'.
hiddenContentClass: (class name) Where the content is (the title attribute div on the anchor). Once the link is clicked, it will show the contents of that div, this should be a class with the style attribute of display:none. This div should also contain the id corresponding to the 'title' attribute on your anchor tags so it
knows which content to display.
showDefaultTab: (integer) If you want the first tab to be opened once the page is loaded, leave this at 1. If you want the 2nd tab to be open then change it to 2. If you don't want any tabs to be open then change it to say null.
showErrors: (true/false) If an error occurs, you'll probably want to know what it is.
effect: (null, 'slide' or 'fade') You can have the content appear with an effect, slide in or fade in. If you don't want an effect and you just want it to be displayed, make this null.
effectSpeed: ('slow','medium' or 'fast') This is the speed you want the effect to run at.
Your HTML should look similar to the code below
<a href="#" title="divname">Merry Christmas</a>
<a href="#" title="divname2">Joyeux Noel</a>
<a href="#" title="divname3">Feliz Navidad</a>
<div class="clear"></div>
</div>
<div id="divname" class="hiddencontent"> this is content from the div with the id "divname", we are linking to this by giving the anchor a title attribute with the value of "divname". </div>
<div id="divname2" class="hiddencontent"> this is more content from the div with the id "divname2" </div>
<div id="divname3" class="hiddencontent"> this is more content from the div with the id "divname3" </div>
19 Sexy Responses to jTabber for jQuery
had this to say...
@Takumi: Sorry, I have not set this up to use different classes.
had this to say...
Hi, I’m interested if you can tell me if it’s possible to preserve tab on reload page?Let me explain: I’m on 3rd tab and I want to reload page, then I get defaulted tab (1st), but I want to stay on tab 3?
Is it possible?
pozz
had this to say...
@woss: You can accomplish this by using the “showDefaultTab” option and setting it to 3.
had this to say...
@Jordan Boesch
is it possible to use cookies or some other method to make it active after reload?
had this to say...
Encountered a problem:
When using text-align: right (in my case) for the nav div (#
) it is correctly displayed in Firefox, but not in IE6.
Habe tried to apply it to the #nav a, but this doesn’t solve the problem either.
Could you point me in the right direction!
Thanx
had this to say...
@rendered: If I know what you mean, you will have to use some CSS to position them in the center.
@woss: Using a cookie is a great idea. I will think about this for an upcoming release.
had this to say...
hi Jordan,
can i use multiple jtabber in one page?
had this to say...
[...] jTabber- Allows you to scroll through content by clicking on tabs, without the page having to [...]
had this to say...
This is super. I have enjoyed playing with it.
Is there a way to create a link within one section to another?
Thanks!
had this to say...
Great plugin, but is there any word on the cookie function?
had this to say...
Nothing yet, I haven’t found the time. Sorry!
had this to say...
Hello,
Plugin looks great and kind of working for me but the activeLinkClass and hiddenContentClass parameters don’t seem to be working for me.
Any ideas?
Thanks
had this to say...
[...] cosa suggerirei di vedere cosa fa il plugin stesso andando alla pagina demo del suo autore. Nella pagina dedicata al progetto troviamo il link al pacchetto della demo stessa, cioè un file zippato contenente sia [...]
had this to say...
This is nice and easy to use BUT,
since the Title attribute is used, every time the user puts the mouse over a tab they get a very unhelpful tooltip indicating the id which will be selected.
Is there plans to disable such ugliness? Also I need tooltips on the tabs themselves which the title attribute being used by jtabber prevents.
had this to say...
have you tried a background image in your hiddencontent class? works beautifully but i need an ie6 png fix…
jquerys ifixpng2 is the only fix that really works but theres an issue…
when the png fix is assigned to the hidden content, the text moves underneath the background image (only in ie6)
ive tried putting the background in the wrap div, adding classes, wrapping the content, and using z-index but cant seem to get it to work.
any thoughts?
thanks,
Trisha
had this to say...
@Morgan: Not to sure, check the example again.
@trisha: I’m not seeing the text moving above the background image on your example.
Feel free to put in your 2 cents. I need cash.
Code must be put in between <code> </code> tags or there will be no soup for you.
had this to say...
Hello,
jTabber definitely looks useful! I have a question though, what if you wanted to use a different activeLinkClass for each anchor?
Thanks!
Takumi