After spending the last few months hacking away at the Yahoo! User Interface Library (YUI), I’ve figured out how to do a few things that are pretty much undocumented. The YUI TabView component, specifically, is a pretty slick control with a very lightweight structure and simple, elegant markup. On the other hand, customizing a TabView instance can be a little daunting for anyone who hasn’t spent a lot of time mucking with relatively elaborate CSS.

Since I spent a while digging away on this topic the other night, and didn’t come across anything useful as a how-to after searching for a half hour, I thought I’d post a quick how-to / tutorial for anyone trying to get rounded corners going for their TabView implementation. Hopefully it’ll save you a little aggravation. :)

The Demo

Try out the YUI TabView rounded corners demo.

The Code

You can download the example source code here.

The CSS

I’ve only included the additions I’ve made to the base TabView CSS here. Each tab has three potential states (normal, hover, and selected). In order to produce the rounded corners effect, each state needs to have a pair of top corner images defined, for a grand total of six images, in addition to the three tab images I already use.

Each rounded corner image is positioned absolutely, and you’ll notice that I’ve thrown in a -1px margin for each corner’s outer edges so that they overlap the base TabView’s borders. I’ve setup my TabView to have a 1px border that matches the corner images I’ve used, but you can tweak it however you like. The one thing to note when creating your corner images is that if you’re using a graphic tool like Adobe Fireworks CS3, make sure to use a hard line (aliased) for your rounded rectangle border and not a soft line (anti-aliased), otherwise it won’t match the CSS borders of your tabs.

.yui-nav a .tl, .yui-nav a .tr {
position: absolute;
width: 6px;
height: 6px;
top: -1px;
}

.yui-nav a .tl {
left: -1px;
background: transparent url('./images/tab_normal_tl.jpg') no-repeat;
}

.yui-nav a .tr {
right: -1px;
background: transparent url('./images/tab_normal_tr.jpg') no-repeat;
}

.yui-nav a:hover .tl {
background: transparent url('./images/tab_hover_tl.jpg') no-repeat;
}

.yui-nav a:hover .tr {
background: transparent url('./images/tab_hover_tr.jpg') no-repeat;
}

.yui-nav .selected a .tl, .yui-nav .selected a .tr {
width: 7px;
height: 7px;
}

.yui-nav .selected a .tl {
background: transparent url('./images/tab_selected_tl.jpg') no-repeat !important;
}

.yui-nav .selected a .tr {
background: transparent url('./images/tab_selected_tr.jpg') no-repeat !important;
}

The HTML

Here’s my modified TabView markup. The key things to notice here are the empty span tags on either side of the tab headings.

I’ve added empty spaces inside them to make sure my syntax highlighter doesn’t munge the code, but you can remove that space if you want. The empty spans pull in the CSS classes above and render the rounded corners for each tab state.

<div id="tabWrapper">
<div class="yui-navset" id="tabView">
<ul class="yui-nav">
<li class="selected"><a href="#tab1"><span class="tl" /><em>TAB #1</em><span class="tr"> </span></a></li>
	<li><a href="#tab2"><span class="tl" /><em>TAB #2</em><span class="tr"> </span></a></li>
	<li><a href="#tab3"><span class="tl" /><em>TAB #3</em><span class="tr"> </span></a></li>
</ul>
<div class="yui-content">
<div id="tab1">Contents of Tab #1</div>
<div id="tab2">Contents of Tab #2</div>
<div id="tab3">Contents of Tab #3</div>
</div>
</div>
</div>

Tested Browsers

Currently tested and working properly in:

• Internet Explorer 6
• Internet Explorer 7
• Firefox 2.0.0.11
• Flock 1.0.3

Currently having minor problems in:

• Safari 3.03

Currently totally broken in:

• Opera 9.2.4

I’ll try and get the Safari problems ironed out soon — they seem to have popped up when I switched from using a modified tabview yui-sam-skin to the tabview-core.css. As for Opera, I have no clue what’s going on there. I’ll see if I can track it down, but no guarantees.

Disclaimer & Other Stuff

I’ve only tested this with YUI release 2.3.1 in Firefox 2 and IE6 & IE7, so I can’t guarantee how it’ll run in different or older browsers, but the markup and CSS are simple enough that if you do run into a problem, it shouldn’t be too hard to tweak. My sample code is pointing at the Yahoo servers for all included files, so you’ll probably want to change those references to point to your own copy of the TabView source.

I’ve also included my own TabView CSS overrides, but they’re embedded for ease of reading; if you’re looking for best practices, don’t replicate my setup as-is. The custom skin information should really be stored in a separate tabview-skin.css file as described in this article over in the YUI Library.

I’d be interested in seeing anyone else’s solutions to the problem, too — I know that it’s possible with some CSS and JavaScript trickery to both dynamically create the empty corner span tags, and not even use images at all.

Let me know if this was helpful; I have a decent enough selection of YUI CSS tweaks up my sleeve that I could probably put together a whole series of hints and tips.

Update — Nov 8, 2007: Made a few changes to get my CSS overrides to get the tabs to play nice with IE6. Still a little clunkier than newer browsers, but looks good enough. Also tested the tabs in Safari 3.0.3 (Windows), as well as Safari on my iPhone, and they look great.

Update — Nov 30, 2007: Updated to use tabview-core.css instead of the yui-sam-skin version. Should be much cleaner CSS now.

Update — Dec 12, 2007: It appears my last batch of changes broke Safari slightly, so I’ll take a look and try and fix those problems ASAP. Opera is broken pretty badly. Not sure what the deal is there, but I’ll look into it when I get a chance.

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Posted in Code |

Tags: tutorial, howto, css, javascript, yui, tabview, rounded, corners, example