How To: Create a Tabbed Box with YUI Tabs
Tabbed boxes are all the rage these days. Check out the "Explore" section on MSNBC, or the Premium News Theme to see how they can be used in a blog setting. I think it's for a good reason. It allows you to add more content to a page with less clutter while engaging visitors to interact with the site. Plus it's just kinda fun.
Note how these "tabbed boxes" work. They instantly change the content inside the box when you click a new tab -- no loading from the server required. That is because the content for all the tabs is loaded when the page is loaded, but hidden away until the corresponding tab is clicked.
Using the Yahoo! UI Tab View, creating a tabbed box is really pretty easy. Here's how:
1. Include the Javascript files on your page.
...
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.0/build/element/element-beta-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.0/build/connection/connection-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.0/build/tabview/tabview-min.js"></script>
</head>
<body>
<script type="text/javascript">
var myTabs = new YAHOO.widget.TabView("content-explorer");
</script>
...
2. Add the markup for the box.
<div id="content-explorer"> <ul class="yui-nav"> <li class="selected"><a href="#">Articles</a></li> <li><a href="#">Photos</a></li> <li><a href="#">Video</a></li> <li><a href="#">Leprechaun</a></li> </ul> <div class="yui-content"> <div> ... </div> <div> ... </div> <div> ... </div> <div> ... </div> <div> ... </div> </div> </div>
Everything in this markup is important for this to work, including all the ID and class names for all the elements. Notice how there is four list items in the "yui-nav" and four divs in the "yui-content", that is also important. Those should always equally correspond.
3. Style with CSS
#content-explorer {
padding-top: 20px;
width:100%;
line-height:normal;
}
#content-explorer ul {
padding: 10px 10px 0;
list-style: none;
max-width: 770px;
background: url(images/menu_bg.gif) bottom repeat-x;
height: 31px;
}
#content-explorer ul li {
float: left;
background: url(images/right.gif) right top no-repeat;
text-align: center;
overflow: hidden;
margin-left: 5px;
}
#content-explorer ul li a {
display: block;
background: url(images/left.gif) left top no-repeat;
padding: 10px 20px 6px 20px;
font-weight: bold;
color: #999;
}
#content-explorer ul li a:hover {
color: #990000;
}
#content-explorer ul li.selected {
background: url(images/right_cur.gif) right top no-repeat;
}
#content-explorer ul li.selected a {
background: url(images/left_cur.gif) left top no-repeat;
padding-bottom: 8px;
color: #990000;
}
.yui-content {
overflow: auto;
border-bottom: 2px solid black;
border-right: 2px solid black;
border-left: 2px solid black;
padding: 20px;
}
The CSS is completely up to you, there are no naming limitations like there was in the markup. Don't worry about setting display values in there to hide the content of the different tabs, the Javascript will do that for you automatically.
To me, the really cool part about this is just how flexible all of this is. You can do whatever you can dream of inside those divs in the content area.
[EXAMPLE PAGE]
[DOWNLOAD EXAMPLE]
- Login or register to post comments
- 3717 reads
- Flag as offensive
- Printer-friendly version
(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)
Comments
humuhumufish replied on Mon, 2008/06/16 - 2:53pm
Hi Chris,
Thank you for this post, I learned a lot. I am trying to add a close 'x' function to the tabs but am having a hard time implementing it. I found this code to put on the same page as the tabs, but don't know what do to next.
<script type="text/javascript">
YAHOO.example.tabs = function() {
var t_counter = 0; // iterator for new tab labels
var myTabs = new YAHOO.widget.TabView('demo');
myTabs.on('contentReady', function() { // ensure Tabs exist before accessing
YAHOO.util.Dom.batch(myTabs.get('tabs'), function(tab) {
YAHOO.util.Event.on(tab.getElementsByClassName('close')[0], 'click', handleClose, tab);
});
YAHOO.util.Event.on('add-tab', 'click', addTab, myTabs, true);
});
var handleClose = function(e, tab) {
YAHOO.util.Event.preventDefault(e);
myTabs.removeTab(tab);
};
function addTab(e) {
YAHOO.util.Event.preventDefault(e);
t_counter++;
var newTab = new YAHOO.widget.Tab({
label: 'New Tab #' + t_counter + '<span class="close">X</span>',
content: 'New tab content for Tab # ' + t_counter + ' goes here.'
});
this.addTab(newTab);
YAHOO.util.Event.on(newTab.getElementsByClassName('close')[0], 'click', handleClose, newTab);
};
}();
YAHOO.util.Event.on(window, 'load', function() { dp.SyntaxHighlighter.HighlightAll('code'); });
</script>
Cheers, Graham