Onglets de l'interface utilisateur de jQuery: ajouter des contrôles de défilement lorsque trop d'onglets

Question

Existe-t-il une meilleure manière/extension des onglets qui peuvent gérer/fournir des contrôles pour faire défiler les onglets lorsqu'il y a trop d'onglets?

J'ai trouvé certains, mais ils ne fonctionnent pas avec la dernière jquery-ui-1.10.3. Par exemple, Jizmoz Tabs est beaucoup mieux en option mais ne fonctionne pas avec un nouvel ui ou avec jquery 1.9.1.

D'autres suggestions?

Jizmoz Tabs JSFIDDLE:

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

Answer 1

Regardez ces liens

lien deuxième peut être helpfull

http://riteshsblog.blogspot.in/2011/09/jquery-ui-tab-scroller-plugin.html

[http://jsfiddle.net/Bua2d]

Answer 2

Utilisez la bibliothèque this. jquery-migrate-1.2.1.js doit être référencé. Exemple d'utilisation:

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

ceci est mis à jour Jizmoz onglets jsFiddle, qui est aussi un changement de jquery scrollable tab première version. Je l'utilise avec jquery-2.1.1 et tout fonctionne bien.

Answer 3

Cette seule ligne fonctionne comme par magie:

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

Il affiche uniquement les pleins onglets en vol stationnaire au-dessus de l'en-tête de l'onglet, sinon il affiche seulement la première rangée d'onglets (32px par défaut, mais le changement en fonction de vos besoins).

Answer 4

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

Cela fonctionne mais avec quelques erreurs.

Answer 5

J'ai créé un plugin pour cela qui utilise le comportement de tabulation de tabulation de style Chrome.

INITIALISER

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

Demo

GitHub