Problem:

jQuery UI tabs is one of my favorite jquery plugin I use in most of my projects. It is so simple to use and it degrade gracefully. It has some very nice features and the events are really helpful.

However while I was working on a project where all the tabs contents are dynamic i.e user perform a search and than the results will be grouped up in tabs but the problem was that you never know how many tabs do i need as it can be just 1 or it can be 50. The problem is that you should know the number of tabs so you can give a width to the wrapper so all tabs can fit in one row.

Unfortunately in my case I could not use it because I cannot give the wrapper a width of like 1000px for many tabs. If you give the wrapper a fixed width, the tabs will try to adjust it self in as many rows as it can to adjust all the tabs, something like this:

//jQuery ui tabs
$('#example_1').tabs();

Add new tab

Googling:

I searched google to find what should I do to solve this problem. The perfect solution would be to arrange the tabs in a way all the browsers handles them specially Firefox. If there is one tab, don’t show the ‘Close tab’ button, if you have many than show two small arrows on the left and right of the tabs bar so that user can scroll through the tabs in either direction.

After spending alot of time on googling the solution, I did not found any proper solution. Though I found two plugins which was some how what I was looking for:

1. JSExt advanced tabs: Very simple interface and exactly what i was looking for but sadly it was not based on jQuery and I will never want to include a whole new JS library to solve this problem as I was already using jQuery, jQuery-ui and Openlayers in my project. So I drop the idea to use this plugin.
2. jQuery tabs paging: When I found this plugin I felt happy as it is based on jQuery and jQuery-ui. The problem was that it uses window.resize event to adjust tabs in one row and also its not very flexible in terms of options and I don’t like to mess up with others code to achieve what I want. So unfortunately I dropped this idea too.

Solution:

Finally I gave up and decided to create my own plugin as while googling a lot of people were looking for the solution of this exact same problem. And here is what I came up with:

//jQuery ui scrollable tabs
$('#tabs').tabs().scrollabletab();

Add new tab

Documentation, demo and downloads:

I have created a separate page for this plugin where you can find the details of plugin and its options.
http://jquery.aamirafridi.com/jst

Note:

I will appreciate and credit if somebody can spend sometime on the overflow issue of tabs in IE6.