C'è un Jquery scheda di controllo che gestisce le linee multiple di schede bene?

Question

Ho un'applicazione web con un numero dinamico di schede che vanno da 2 a 20.

Attualmente sto usando Jquery UI scheda di plugin, ma la constatazione che il comportamento è meno Ideale (cioècirca 12 schede, quando si avvolge, la seconda linea di schede spostare con la scheda di selezione e, a volte, saltare su 3 linee, invece di due.

Questo è un duplice domanda, prima di tutto qualcuno ha qualche idea di come potrei interrompere la seconda fila di schede di saltare in giro quando si cambia la selezione.

In alternativa qualcuno conosce una scheda plugin per jQuery che consente di gestire più linee di schede (se non riesco a trovare una risoluzione potrei finire con il ExtJS o qualcosa di simile, ma stava cercando di mantenere questa applicazione abbastanza leggero).

Risposta

Dopo ulteriori indagini si scopre che questo è stato causato da Jquery UI tema stavo usando, questa è stata la problematica stile:

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

Ho appena rimosso il padding-bottom:.1em e risolvere il problema (l'indizio era che la seconda fila di elementi sono in movimento insieme con la selezione in fase di modifica).

Answer 1

non avete davvero bisogno di un'estensione a tutti.Basta usare galleggianti LI con un senza stile UL.LI dovrebbe avvolgere correttamente.Di solito è una buona idea per garantire parole nella stessa scheda non avvolgere da sostituire "" con " ".

La mia scheda personalizzata di controllo è costruito in modo dinamico con ASP.Net ma la tabulazione e la mostra/nascondi funzionalità di 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 di 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

Non è una soluzione tecnica, ma di tenere presente che Nielsen sconsiglia di più righe di schede:

C'è solo una riga di tab.Più righe creare salto elementi dell'interfaccia utente, che distruggere la memoria spaziale e quindi rendere l'impossibilità per gli utenti di ricordare le schede che hai già visitato.Anche, naturalmente, il più righe sono un sintomo di eccessiva complessità:Se avete bisogno di più schede che si inserisce in una singola riga, è necessario semplificare il vostro disegno.

-- Schede, Utilizzato A Destra:13 Linee Guida Di Usabilità

Answer 3

Questo problema è descritto in un bug report jQuery UI issue tracker.Su quella segnalazione, ho applicato una patch che risolve questo problema, mentre conservazione l' .ui-tabs-nav confine al di sotto di schede non selezionate.Ciao.

Answer 4

Non mi piace il modo in cui le schede di rendering quando la rottura di una seconda linea, così ho scritto un plugin per introdurre una "vedere di più" scheda, invece di rompere per una seconda linea.

https://github.com/jasonday/plusTabs

Answer 5

Ho trovato che è stato utile per ordinabile schede su più righe.Uno dei problemi che ho avuto è stato che le linguette non scattano in posizione correttamente a meno che non axis: 'x' è stato specificato, ma questo sembrava brutto quando si trascina tra le righe.

Sono riuscito a migliorare con il seguente:

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

Ci sono un sacco di grandi risposte che possono essere utilizzati per risolvere il problema, ma qui è la mia ¢2.

Per semplificare le questioni, si può semplicemente aggiungere un <hr> ha lo stile che ti piace per separare le righe di schede.A mio parere questo sembra anche più bello di avere aperto le righe.