Tab widget : PART II – Making tabs EYECANDY (UPDATED)

spice up your interface with some nice CSS enabling the frontend to get more and more eyecandy

Making the tab widget eyecandy!

[[Media:2254526 right]]

So, the week is about to end and did some writing for you 🙂

As I am well known for stating that applications need to be eyecandy to charm the user among those who talk with me about that I felt the need to give u an update on the AJAX DRIVEN TAB WIDGET. This will demonstrate the power of CSS and how less is needed to deliver high quality widgets :

Step 1: adding grafics in the right spots

Our widget consists of tabs and an output container (similar to the DSP tab widget in the all famous F1 (Help file)). In the first version, I just filled in some color in the two states of the tab. First one is to just display the tab, next is the MouseOver event or “trigger”.

The Idea is to replace the color with some simple grafics. Many People think they need to put some complete grafic showing a button here. The MusicShop has pretty much of this which actually takes som KB to load. As usual we will manage this in a smarter way 🙂

We will take two images consisting of 23px having a payload of 150 BYTES each, no matter how big the tab is or how many tabs we have!  …yes … you read right- just 23 tiny green colored pixels 😉

You’ll find the files attached to this article in the bottom. Copy it to the directory, where the html file from part 1 has been saved.

 

Step 2: defining the right properties

Ok, the grafics are placed and now we need to define, what has to be done with them. This is pretty easy as we just need to change some lines in the CSS definition. Look for those listed definitions and append them in the buttom like this:

.mytab li a {
    (previous definitions STAY HERE ...)
    color: #FFF;
    background-image: url(fs_green_22.gif);
    background-repeat: repeat-x;		
}

.mytab li a:hover {
    (previous definitions STAY HERE ...)
    color: #404040;
    background-image: url(fs_lgreen_22.gif);
}

 

Try to save the html file and open it in your favourite browser. Tadaaa! there you go! … But we can still enhance this a bit aslong as we LOVE STANDARDS and use corresponding browsers … 😉

 

[[Media:2253938 left]]

 

Step 3: Mozilla, Chrome, Safari makes a better web

The web consists of a set of many BOX LAYOUTS more or less nice to look at. With the mentioned browsers by time came some new stuff up: ROUNDED CORNERS. As it still is a “boxed” world, we now can define
rounded corners in CSS and with that modify those boxy shapes to be even more sexy 😉 Include the following in your CSS:

.mytab li a {
    (previous definitions STAY HERE ...)

     -moz-border-radius-topleft: 8px;
     -moz-border-radius-topright: 8px;
     -webkit-border-radius-topleft: 8px;
     -webkit-border-radius-topright: 8px;
}

This tells the browser to round those edges with a radius of 8 pixels. The smart thing about that is, that IE will ignore it and everybody will perform on that layout. I assume this to
get included as a stadard in the next CSS version. By now this is pretty fine already.

[[Media:2253940 right]]

Anyway- just save it and reload the html file and there you go!

Have fun with this and a nice weekend to you all!

digitally yours,

-GHAN-

HINT: find the updated article on http://www.udev.info/uniface/making-the-tab-widget-eyecandy/

0 thoughts on “Tab widget : PART II – Making tabs EYECANDY (UPDATED)”

Leave a Reply