Existe-t-il un contrôle d’onglet Jquery qui gère bien plusieurs lignes d’onglets?

Question

J'ai une application Web avec un nombre dynamique d'onglets allant de 2 à 20.

J'utilise actuellement le module de tabulation de Jquery UI, mais je constate que son comportement est inférieur à Idéal (c'est-à-dire environ 12 onglets. Lorsqu'il est renvoyé à la ligne, la deuxième ligne se déplace avec la sélection d'onglets et saute parfois sur 3 lignes au lieu de deux.

C’est une double question. Tout d’abord, at-on une idée de la façon dont je pourrais arrêter la deuxième rangée de tabulations lorsque la sélection est modifiée?

Sinon, est-ce que quelqu'un connaît un plugin pour jQuery qui gère plusieurs lignes d'onglets (si je ne trouve pas de résolution, je pourrais utiliser ExtJS ou quelque chose de similaire, mais je voulais garder cette application assez légère ).

Répondre

Après des recherches approfondies, il s’avère que cela est dû au thème Jquery UI que j’utilisais, c’est le style qui pose problème:

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

Je viens de retirer le padding-bottom: .1em et le problème a été résolu (l'indice était que la deuxième rangée d'éléments se déplaçait avec le changement de sélection).

Answer 1

vous n’avez vraiment pas besoin d’une extension. Utilisez simplement des LI flottantes avec une UL non stylée. Les LI doivent être correctement emballés. Il est généralement judicieux de s’assurer que les mots figurant dans le même onglet ne se terminent pas en remplaçant & Quot; " avec & "; & nbsp; &";.

Mon contrôle de tabulation personnalisé est créé dynamiquement avec ASP.Net, mais la fonctionnalité de tabulation et de masquage / affichage est entièrement jQuery.

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

CSS de base

#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

Ce n'est pas une solution technique, mais n'oubliez pas que Nielsen recommande vivement de ne pas utiliser plusieurs rangées d'onglets:

  

Il n'y a qu'une seule rangée d'onglets. Plusieurs   les lignes créent des éléments d'interface utilisateur sautants, qui   détruire la mémoire spatiale et ainsi faire   impossible pour les utilisateurs de se souvenir   quels onglets ils ont déjà visités.   De plus, bien sûr, plusieurs lignes sont un   symptôme certain de complexité excessive:   Si vous avez besoin de plus d'onglets   une seule ligne, vous devez simplifier   votre conception.

- Onglets, utilisés à droite: Les 13 consignes d'utilisation en vigueur

Answer 3

Ce problème est décrit dans un rapport de bogue sur l'outil de suivi des problèmes de jQuery UI. Sur ce rapport de bogue, j’ai joint un correctif qui résout ce problème tout en préservant la bordure .ui-tabs-nav sous les onglets non sélectionnés. Cheers.

Answer 4

Je n’aimais pas la façon dont les onglets étaient rendus lorsqu’on passait à une deuxième ligne, j’ai donc écrit un plugin pour introduire un & "voir plus &"; onglet au lieu de passer à une deuxième ligne.

https://github.com/jasonday/plusTabs

Answer 5

J'ai trouvé que ce qui suit était utile pour les onglets triables sur plusieurs lignes. L’un des problèmes que j’avais était que les onglets ne se mettaient pas en place correctement à moins que axis: 'x' ne soit spécifié, mais cela paraissait moche lors du glissement entre les lignes.

J'ai réussi à améliorer cela avec les éléments suivants:

$('#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

Il existe de nombreuses bonnes réponses qui peuvent être utilisées pour résoudre complètement le problème, mais voici mon propre & # 162; 2.

Pour simplifier considérablement les choses, vous pouvez simplement ajouter un <hr> style à votre guise pour séparer les rangées d'onglets. À mon avis, cela semble également plus agréable que d'avoir des lignes ouvertes.