Rien de spécial

I like the user experience offered by 01net. There is a contextual text which changes when the mouse goes over titles positionned in tabs, and the tabs titles are links to a more detailed page.

I've done the tab widget with clickable links with jQuery (live demo). I have slightly extended the original jQuery UI tabs by BKlaus Hartl.

First you need to include the jQuery library.

Then set up a the tabs widget.

By default, the content of the tab panel is changed when you click on the tab. I want to change this behaviour, and select a tab with the mouseover event instead. Jquery provides an option for this:

Now comes the hard part. I want to change the event handler triggered when clicking a tab. As the documentation might suggest, I tried to set the select event handler.

However, it turns out that a tab is now "clicked" when the mouse rolls hover, because of the event I have changed before. The jQuery documentation should say that select is "The event which is triggered, as defined by the event option (or, by default, when the link in the tab title is clicked)"

So I have decided to overide the click event on the link. To do this, I have added a class attribute to my links. Instead of

I have now

As you can see, I have decided to rely on the "rel" attribute to define the real link, and this looks rather appropriate.

And of course, I have defined some Javascript to handle the click:

Edit: to improve the user experience, discret-incognito advised me to set the pointer to cursor for the links on tab titles. This is done in one line of CSS

But because, this is overridden by jQuery-UI, it doesn't work 'or just a fraction of second). I actually have to overload jQuery:

Thanks for reading, enjoy the live demo of tabs widget. Hope this helps!