Geek Answers Handbook

JQuery UI Tabs: Add Scroll Controls When Too Many Tabs

Is there a better way / extension for ui tabs that can handle / provide tab scroll controls when there are too many tabs?

I found some, but they do not work with the latest jquery-ui-1.10.3. For example, Jizmoz Tabs is much better at option, but does not work with new ui or with jquery 1.9.1.

Any other suggestions?

Jizmoz Tabs JSFIDDLE:

$("#tabs").tabs({
    scrollable: true,
    changeOnScroll: false,
    closable: true
});
+4
source share
5 answers

Use this library. Jquery-migrate-1.2.1.js should be referenced. Usage example:

    $("#tabs").xtabs({
        scrollable: true,
        changeOnScroll: false,
        closable: true
    });

Jizmoz Tabs JSFIDDLE, jquery scrollable . jquery-2.1.1, .

+1

magic:

$(".ui-tabs-nav").hover(function () { $(this).css("height", "auto"); $(this).css("overflow", "hidden"); $(this).css("overflow", "auto"); }, function () { $(this).animate({ height: "32px" }, 600); });

, ( 32px, ).

+1
replace "_super._create.apply(self);", with "self._superApply(self);"
replace "_super._update.apply(self);", with "self._superApply(self);"

It works, but with some errors.

0
source

I created a plugin for this that uses Chrome style tab resizing behavior.

Initialize with

$( ".tabpanel" ).tabs().tabs('overflowResize');

Demo

Github

0
source

More articles:


All Articles