Chris has posted 24 posts at DZone. You can read more from them at their website. View Full User Profile

How To: Create a Tabbed Box with YUI Tabs

03.17.2008
| 14284 views |
  • submit to reddit
tabbed-box-header.jpg

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]

Published at DZone with permission of its author, Chris Coyier.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Tags:

Comments

Graham Sherwood 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 

Walter Reynolds replied on Fri, 2008/08/29 - 11:14am

I have implemented the box but for some reason i am missing my upper right and left corners and cant seem to resolve. Beginner designer here. Everything else seems to be working fine except for the top corners. Any idea what I have done wrong? Any assistance would be greatly appreciated.

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.