Is there a Jquery tab control which handles multiple lines of tabs well?

Question

I have an web application with a dynamic number of tabs ranging between 2 to 20.

I'm currently using Jquery UI's tab plugin, but finding that it's behaviour is less then Ideal (i.e. around 12 tabs, when it wraps, the second line of tabs move with the tab selection and sometimes jump across 3 lines instead of two.

This is a two-fold question, first off does anyone have any idea how I could stop the second row of tabs jumping around when the selection changes.

Alternatively does anyone know of a tab plugin for jQuery that handles multiple lines of tabs well (if I can't find a resolution I might end up using ExtJS or something similar, but was trying to keep this application fairly light-weight).

Answer

After further investigation it turns out this was being caused by the Jquery UI theme I was using, this was the problematic style:

.ui-tabs .ui-tabs-nav li.ui-tabs-selected {  padding-bottom: .1em; border-bottom: 0; }

I just removed the padding-bottom: .1em and it resolve the issue (the clue was that the second row of elements were moving along with the selection changing).

Answer 1

you don't really need an extension at all. Just use floating LI's with an unstyled UL. The LI's should wrap properly. Usually a good idea to ensure words in the same tab do not wrap by replacing " " with " ".

My custom tab control is built dynamically with ASP.Net, but the tabbing and the hide/show functionality is all jQuery.

<div id="tabWrapper">
    <ul id="tabContainer">
        <li>Tab&nbsp;1</li>
        <li>Tab&nbsp;2</li>
        <li>Tab&nbsp;3</li>
     </ul>
</div>

Basic CSS

#tabWrapper
{
    border-bottom: solid 1px #676767;
}

#tabContainer 
{
    padding:0;
margin:0;
    position:relative;
    z-index: 1;
    float:left;
    list-style:none;
}

#tabContainer li 
{
    float:left;
    margin:0;
    cursor: pointer;
    background: f1f1f1;
    border-top: solid 1px #676767;
    border-left: solid 1px #676767;
    border-right: solid 1px #ababab;
    margin-bottom: -1px;
}

#tabContainer .selected, #tabContainer .selected:hover
{
    background: #fff;
}

Answer 2

Not a technical solution, but keep in mind that Nielsen strongly recommends against multiple rows of tabs:

There's only one row of tabs. Multiple rows create jumping UI elements, which destroy spatial memory and thus make it impossible for users to remember which tabs they've already visited. Also, of course, multiple rows are a sure symptom of excessive complexity: If you need more tabs than will fit in a single row, you need to simplify your design.

-- Tabs, Used Right: The 13 Usability Guidelines

Answer 3

This problem is described in a bug report on the jQuery UI issue tracker. On that bug report, I attached a patch which solves this problem while preserving the .ui-tabs-nav border below non-selected tabs. Cheers.

Answer 4

I didn't like the way tabs rendered when breaking to a second line, so I wrote a plugin to introduce a "see more" tab instead of breaking to a second line.

https://github.com/jasonday/plusTabs

Answer 5

I found that the following was useful for sortable tabs on multiple lines. One of the issues I had was that tabs didn't click into place properly unless axis: 'x' was specified, but this looked ugly when dragging between lines.

I managed to improve this with the following:

$('#tab-container')
    .sortable({
        delay       : 200,
        distance    : 20,
        axis        : 'x'
    })
    .on('sort sortchange', function() {
        $('.ui-sortable-helper').css('top', $('.ui-sortable-placeholder').position().top + 'px');
    });

Answer 6

There are a lot of great answers which can be used to fully solve the problem but here is my own ¢2.

To greatly simplify matters, you can just add a <hr> styled as you like to separate the rows of tabs. In my opinion this also looks nicer than having open rows.