¿Hay un control de pestañas Jquery que maneje bien varias líneas de pestañas?

Question

Tengo una aplicación web con una serie dinámica de pestañas que oscilan entre 2 a 20.

actualmente estoy usando jQuery UI pestaña plugin, pero al ver que su comportamiento es inferior a ideal (es decir, alrededor de 12 fichas, cuando se Wraps, la segunda línea de pestañas se mueve con la selección de pestañas y algunas veces salta a través de 3 líneas en lugar de dos.

Esta es una pregunta doble, primero alguien tiene alguna idea de cómo podría detener la segunda fila de pestañas saltando cuando la selección cambia.

Como alternativa, ¿alguien sabe de un plugin de tabulación para jQuery que maneja bien varias líneas de pestañas (si no puedo encontrar un resolución podría terminar utilizando ExtJS o algo similar, pero estaba tratando de mantener esta aplicación bastante liviana).

respuesta

Después de investigaciones adicionales resulta que esto era causado por el tema de jQuery UI que estaba usando, este era el estilo problemática:

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

me acaba de quitar el padding-bottom : .1em y resolvió el problema (la clave era que la segunda fila de elementos se movía junto con el cambio de selección).

Answer 1

realmente no necesita una extensión en absoluto. Simplemente use LI flotantes con UL sin estilo. Los LI deben envolverse adecuadamente. Por lo general, es una buena idea asegurarse de que las palabras en la misma pestaña no se envíen reemplazando "" por " ".

Mi control de pestañas personalizado está construido dinámicamente con ASP.Net, pero la función de tabulación y ocultar/mostrar es 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 básico

#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

No es una solución técnica, pero tenga en cuenta que Nielsen recomienda fuertemente en contra de varias filas de pestañas:

Sólo hay una fila de pestañas. Múltiples filas crean elementos de UI de salto, que destruyen la memoria espacial y, por lo tanto, hacen que sea imposible para los usuarios recordar que pestañas ya han visitado. Además, por supuesto, varias filas son un síntoma seguro de excesiva complejidad: Si necesita más pestañas que las que caben en una sola fila, debe simplificar su diseño.

- Tabs, Used Right: The 13 Usability Guidelines

Answer 3

Este problema es described in a bug report en el seguimiento de incidencias jQuery UI. En ese informe de error, adjunté un parche que resuelve este problema mientras conserva el borde .ui-tabs-nav debajo de las pestañas no seleccionadas. Aclamaciones.

Answer 4

Encontré que lo siguiente era útil para las pestañas ordenables en varias líneas. Uno de los problemas que tenía era que las pestañas no se ajustaban correctamente a menos que se especificara axis: 'x', pero esto se veía feo cuando se arrastraba entre líneas.

I conseguido mejorar esto con lo siguiente:

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

que no le gustaba la forma pestañas prestados al romper a una segunda línea, así que escribí un plugin para introducir una pestaña de "ver más" en lugar de romper a una segunda línea.

https://github.com/jasonday/plusTabs

Answer 6

Hay un montón de grandes respuestas que se pueden utilizar para resolver totalmente el problema, pero aquí es mi propia ¢ 2.

Para simplificar mucho las cosas, sólo puede añadir un <hr> labrado como desee para separar las filas de pestañas. En mi opinión, esto también se ve mejor que tener filas abiertas.