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="jquery.js"></script>
-
<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
-
<div id="nav">
-
<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>
13 Sexy Responses to jTabber for jQuery
Hello,
jTabber definitely looks useful! I have a question though, what if you wanted to use a different activeLinkClass for each anchor?
Thanks!
Takumi
@Takumi: Sorry, I have not set this up to use different classes.
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
@woss: You can accomplish this by using the “showDefaultTab” option and setting it to 3.
@Jordan Boesch
is it possible to use cookies or some other method to make it active after reload?
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
How can I center the tabs?
@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.
hi Jordan,
can i use multiple jtabber in one page?
[…] jTabber- Allows you to scroll through content by clicking on tabs, without the page having to […]
This is super. I have enjoyed playing with it.
Is there a way to create a link within one section to another?
Thanks!
Great plugin, but is there any word on the cookie function?
Nothing yet, I haven’t found the time. Sorry!
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.
Fresh off the pot
Brewing in the lab
