Gibt es eine JQuery Registerkarte Steuerung, die auch mehrere Zeilen von Registerkarten behandelt?

StackOverflow https://stackoverflow.com/questions/624516

Frage

Ich habe eine Web-Anwendung mit einer Anzahl von dynamischen tabs zwischen 2 bis 20 reichen.

Ich bin derzeit mit JQuery UI-Tab-Plugin, aber festgestellt, dass es Verhalten ist weniger dann Ideal (dh etwa 12 Tabs, wenn es Wraps, die zweite Zeile von Registerkarten mit der Registerkarte Auswahl bewegen und manchmal über 3 Zeilen springen statt zwei.

Dies ist eine zweifache Frage, zunächst einmal hat jemand eine Ahnung, wie ich die zweite Reihe von Registerkarten stoppen könnte herumspringen, wenn sich die Auswahl ändert.

Alternativ weiß jemand von einer Tab-Plugin für jQuery, die auch mehrere Zeilen von Registerkarten Griffen (wenn ich nicht eine Lösung finden kann ich ähnlichen ExtJS oder etwas mit vielleicht am Ende, sondern versuche, diese Anwendung zu halten ziemlich leichtgewichtige ).

Antwort

Nach einer weiteren Untersuchung stellt sich heraus, das durch die JQuery UI Thema verursacht wurde ich benutzte, war die problematische Art: 

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

Ich entfernte gerade das padding-bottom: .1em und das Problem zu beheben (der Schlüssel war, dass die zweite Reihe von Elementen zusammen mit der Auswahl Wechsel bewegt)

.
War es hilfreich?

Lösung

Sie brauchen nicht wirklich eine Erweiterung überhaupt. Verwenden Sie einfach LI mit einem unstyled UL schwebend. Die LI sollte richtig wickeln. In der Regel eine gute Idee, um sicherzustellen, Wörter in der gleichen Registerkarte Wickeln nicht durch Ersetzen „“ mit „“.

Meine benutzerdefinierten Registerkarte Steuerung wird dynamisch mit ASP.Net gebaut, aber die Navigation mit der Tabulatortaste und die hide / show Funktionalität ist alles jQuery. 

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

Grund 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;
}

Andere Tipps

Nicht eine technische Lösung, aber bedenken Sie, dass Nielsen empfiehlt nachdrücklich gegen mehrere Reihen von Registerkarten:

  

Es gibt nur eine Reihe von Registerkarten. Mehrere   Reihen create jumping UI-Elemente, die   räumliches Gedächtnis zerstören und damit machen   es unmöglich für die Benutzer daran zu erinnern,   die Registerkarten sie bereits besucht haben.   Auch natürlich mehrere Zeilen sind ein   sicher Symptom für übermäßige Komplexität:   Wenn Sie mehr Tabs benötigen als passen   eine einzelne Zeile, müssen Sie vereinfachen   Ihr Design.

- Tabs, gebraucht Rechts: Die 13 Usability-Richtlinien

Dieses Problem ist in einem Bug-Report auf der jQuery UI issue tracker beschrieben. An diesem Bug-Report, angebracht ich einen Patch, der dieses Problem löst, während Erhaltung die .ui-tabs-nav Grenze unten nicht ausgewählten Registerkarten. Prost.

Ich mochte die Art und Weise Tabs nicht wiedergegeben, wenn auf eine zweite Linie zu brechen, so schrieb ich ein Plugin einen „mehr sehen“ Tab anstatt zu brechen zu einer zweiten Linie einzuführen.

https://github.com/jasonday/plusTabs

Ich fand, dass die folgenden nützlich für sortierbare Tabs auf mehreren Linien war. Eines der Probleme war ich hatte, dass Tabs nicht einrasten hat richtig, es sei denn axis: 'x' angegeben wurde, aber das sah hässlich, wenn zwischen den Linien ziehen.

ich es geschafft, verbessern dies mit den folgenden: 

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

Es gibt eine Menge von großen Antworten, die verwendet werden können, um das Problem vollständig zu lösen, aber hier ist meine eigene ¢ 2.

Um stark Angelegenheiten zu vereinfachen, können Sie nur ein <hr> hinzufügen gestylt wie Sie die Zeilen von Registerkarten trennen mögen. Meiner Meinung nach sieht es auch schöner als offene Reihen haben.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top