[jQuery] $.tabs revised

[jQuery] $.tabs revised


Hi jQuerians,
I have revised the tabs plugin, so that it conforms to the jQuery plugin
construct.
Therefore one can now use the full power of jQuery to retrieve the
container holding the tabs html (good!) and of course can chain methods
(good!). Example:
$('body>div:eq(1)').tabs().fadeIn('slow');
Other changes:
* The tabs method can now take an optional argument, which has to be an
object literal (I'll explain why later). If you want to activate a
custom tab, it has to be written like this:
$('#container').tabs({on: 2});
* The plugin now uses classes instead of the hide/show methods for
hiding the tab content to make all content visible in other media types,
mainly print (this improves accessibility).
See http://jquery.com/discuss/2006-May/001325/
Thus one must include this rules in a style sheet to make it work:
@media projection, screen {
.tabs-hide {
display: none;
}
}
In case you wonder: projection is for Opera in full screen mode.
This could also be made configurable as option - what do you think?
Next steps:
* I want to determine the active tab by the hash in the url, if it exists:
someurl.com/#sometab => The tab referring to the fragment #sometab is on.
* I will add more possible options, two came to my mind so far:
adjustHeight: true
The height of each tab's content will be equalized to the largest one,
so that you do not get annoying jumps of the scrollbar when changing the
tab. This can be a bit irritating.
fade: 'speed'
The tab's content will use fadeIn/fadeOut for changing.
Requests welcome.
Hint: If you want to change tabs programmatically, you can simply use
jQuery's trigger method. Activate 3rd tab for example:
$('#container>ul>li:eq(2)').find('a').trigger('click');
I would call it Version 1.0 now, new URL:
http://stilbuero.de/jquery/tabs/
http://stilbuero.de/jquery/tabs/tabs.zip
John, I'm thinking about putting it into the svn repository, can you
give me access, if you agree with that?
Happy coding,
Klaus
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/