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

Question

Tengo una aplicación web con un número dinámico de pestañas que oscila entre 2 y 20.

Actualmente estoy usando el complemento de pestañas de Jquery UI, pero descubro que su comportamiento es inferior al ideal (es decir, alrededor de 12 pestañas, cuando se ajusta, la segunda línea de pestañas se mueve con la selección de pestañas y, a veces, salta a través de 3 líneas en lugar de dos.

Esta es una pregunta doble, en primer lugar, ¿alguien tiene idea de cómo podría evitar que la segunda fila de pestañas salte cuando la selección cambia?

Alternativamente, ¿alguien sabe de un complemento de pestañas para jQuery que maneja bien varias líneas de pestañas (si no puedo encontrar una resolución, podría terminar usando ExtJS o algo similar, pero estaba tratando de mantener esta aplicación bastante ligera) ).

Responder

Después de una investigación más profunda resulta que esto fue causado por el tema de la interfaz de usuario de Jquery que estaba usando, este era el estilo problemático:

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

Acabo de quitar el relleno inferior: .1em y resuelve el problema (la pista era que la segunda fila de elementos se movía junto con el cambio de selección).

Answer 1

realmente no necesitas una extensión en absoluto. Simplemente use LI flotantes con un 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 envuelvan reemplazando & Quot; " con " & nbsp; " ;.

Mi control de pestañas personalizado está construido dinámicamente con ASP.Net, pero las funciones de tabulación y ocultar / mostrar son todas 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 encarecidamente contra varias filas de pestañas:

  

Solo hay una fila de pestañas. Múltiple   las filas crean elementos de IU saltantes, que   destruir la memoria espacial y así hacer   es imposible para los usuarios recordar   qué pestañas ya han visitado.   Además, por supuesto, varias filas son un   síntoma seguro de complejidad excesiva:   Si necesita más pestañas de las que caben   una sola fila, necesita simplificar   su diseño.

- Pestañas, derecha: las 13 pautas de usabilidad

Answer 3

Este problema se descrito en un informe de error en el rastreador de problemas de 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. Saludos.

Answer 4

No me gustó la forma en que las pestañas se representaban cuando saltaba a una segunda línea, así que escribí un complemento para introducir un & "; ver más &"; pestaña en lugar de pasar a una segunda línea.

https://github.com/jasonday/plusTabs

Answer 5

Descubrí que lo siguiente era útil para pestañas ordenables en varias líneas. Uno de los problemas que tuve fue que las pestañas no encajaban correctamente a menos que se especificara axis: 'x', pero esto se veía feo al arrastrar entre líneas.

Logré 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 6

Hay muchas respuestas excelentes que se pueden usar para resolver completamente el problema, pero aquí está mi propia & # 162; 2.

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