JoeAudette.com

Recently I've begun using the jQueryUI tabs in mojoPortal as an alternative to YUI tabs. I still like the YUI tabs but there is only 1 skin available currently for YUI tabs, whereas there are a 18 themes for the jQuery UI tabs, so its likely that at least one of them will look good with a particular mojoPortal skin. This has got me thinking about switching to use the jQuery tabs in many or most places where we use YUI tabs. I still need to test a few things like making sure I can use FCKeditor inside the tabs like I can with the YUI tabs. One thing I like about the YUI tabs is that they automatically adjust to right to left layout if they are contained within and element with direction:rtl in the css.

I was worried at first whether the jQuery Tabs would support right to left layout because when I googled for it I could not find any explnations how to make the tabs layout from right to left. I found a number of people asking about it on mailing lists and forums but no-one offering any answers. So I used Firebug to study the css classes assigned to the elements and figured out the things that need to be overridden to make it layout from right to left. I thought I should post it since clearly there are people looking for hep with this. Its actually very straightforward, you include the normal css for the jquery ui theme, and you add another css file below it in the page (it must be lower in the page in order to override the style settings above it in the jquery ui css). There is only a little css needed because we want to override the minimum possible style settings, this is what is needed:

.ui-tabs { direction: rtl; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected,
.ui-tabs .ui-tabs-nav li.ui-state-default {float: right; }
.ui-tabs .ui-tabs-nav li a { float: right; }

I tested it with all 18 jQuery UI themes and it worked great. I hope this is helpful to others.