Tab with link and mouesover effect
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.
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
- One [/html]
I have now
- One [/html]
As you can see, I have decided to rely on the « rel » attribute to define the real link, and this looks rather appropriate.
return false; });
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
/* cursor: hand; — add this for IE 5. I don’t care */
But because, this is overridden by jQuery-UI, it doesn’t work ‘or just a fraction of second). I actually have to overload jQuery:
$(« .clickable-tab »).css(« cursor », »pointer »);
Thanks for reading, enjoy the live demo of tabs widget. Hope this helps!