Create a Tabbed Content Box with jQuery Tools
jQuery is without a doubt one of the best frameworks out there. It has a pretty low learning curve, its small for what it does, and its extensibility is endless. jQuery itself boasts its own UI library, but recently FlowPlayer has designed a lightweight, very easy to use UI Library called jQuery Tools
jQuery Tools website says
jQuery Tools is a collection of the most important user-interface components for today’s websites.
Honestly, I love this plugin/addon for jQuery. It makes so many things that would usually take maybe 30 mins, doable in 5 or less. Below I have a very simple tabbed content box perfect for displaying latest posts , comments or tweets in your sidebar. You can view the demo here .
The Setup
For this tutorial you will need to create three files
- index.html
- style.css
- script.js
Dont worry about download jQuery or jQuery Tools just yet, as we will include them from external sources.
The HTML
Open up your index.html and type the following code
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
jQuery Tabbed Content Box
Tab 1
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus.
- Vestibulum auctor dapibus neque.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus.
- Vestibulum auctor dapibus neque.
Tab 2
- Aliquam tincidunt mauris eu risus.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Vestibulum auctor dapibus neque.
Tab 3
- Vestibulum auctor dapibus neque.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus.
As you can see from the above code I have included our script.js and style.css, along with Google-hosted jQuery and the jQuery tools plugin.
Also please look at how simple and clean the above code is. Very easy code as jQuery Tools does all the messy stuff for us. I got the filler content from HTML-Ipsum.
The CSS
The CSS in this is pretty straight forward. I make a quick CSS Reset and the rest is basically just standard practices. Notice, however that I include an “a.current” rule.This is what jQuery tools adds to each of active tabs so that you can show the user which of the tabs is active. I’ve also added a few CSS3 rules, mostly -moz-border-radius, which makes turns a block element into a rounded rectangle.
/* Makeshift CSS Reset */
*{margin: 0; padding: 0; list-style: none; outline: none; border: none;}
html {
font-size: 16px;}
body {
background: #2a2a2a;
font-family:"Helvetica Neue", "Myriad Pro", Helvetica, Arial, serif;
font-size: 62.5%;
}
#contentbox {
margin: 70px auto;
width: 400px;
padding: 20px;
}
#contentbox h1 {
margin-bottom: 40px;
color: #fff;
font-size: 3em;
text-shadow: 1px 1px 1px #232323;
}
#contentbox h1 span {
color:#55addc;
text-shadow: 1px 1px 1px #1e2e3c;
}
ul.tabnav {
width: 400px;
overflow: hidden;
}
ul.tabnav li a{
margin-right: 5px;
float: left;
padding: 5px;
font-size: 1.1em;
text-decoration: none;
color: #55addc;
text-transform: uppercase;
display: block;
font-weight: bold;
}
ul.tabnav li a.current{
-moz-border-radius-topleft: 2px;
-moz-border-radius-topright: 2px;
background: #fff;
color: #1a1a1a;
}
div.tabpanel div {
background: #fff;
padding: 10px;
-moz-border-radius-bottomleft: 3px;
-moz-border-radius-bottomright: 3px;
-moz-border-radius-topright:3px;
}
div.tabpanel div h2 {
font-size: 2em;
color: #2a2a2a;
border-bottom: 1px solid #2a2a2a;
margin:0 5px 10px;
padding-bottom: 3px;
display: block;}
div.tabpanel div ul li {
padding:0 0 3px 5px;
font-size: 1.3em;
}
The jQuery
Here is where the fun bit begins 
$(document).ready(function(){
$("ul.tabnav").tabs("div.tabpanel > div");
});
Yes, three lines of code is all that it takes. Basically you call the function when the document is ready. When its ready it will link the contents of “ul.tabnav” with the direct descendants of “div.tabpanel”, which are divs.
Conclusion
Simple no? I love using this method, however there are a few drawbacks.
- Not Enough Power – Its a very weak piece of code. It may not be useful if you need to do more advanced things. However, I’ve only touched the fringe of jQuery Tools. I’m not saying that jQuery Tools cannot be used. It has an extensive range of possibilites, you just have to know how to use them
- Totally Javascript Based – This is less of a problem these days, because so many sites require Javascript for their applications to work, but you should consider it nonetheless
- Animations – The jQuery Tools tabs has no included animations, which is kind of a let down, seeing as it does everything it’s supposed to really well
Overall this method hits the mark. Its easy, its fast and its free Enjoy.
Thanks 