Existe um controle guia jQuery que lida com várias linhas de guias bem?

Question

I têm uma aplicação Web com um número de abas dinâmico variam entre 2 a 20.

Atualmente estou usando o plugin do guia do jQuery UI, mas encontrar que seu comportamento é menor, então Ideal (ou seja, cerca de 12 guias, quando se envolve, a segunda linha de guias de mover-se com a seleção guia e às vezes salte 3 linhas em vez de dois.

Esta é uma questão de duas vezes, em primeiro lugar, alguém tem alguma idéia de como eu poderia parar a segunda linha de guias pulando quando a seleção é alterada.

Como alternativa Alguém sabe de um plugin guia para jQuery que lida com várias linhas de guias bem (se eu não conseguir encontrar uma solução que pode acabar usando ExtJS ou algo semelhante, mas estava tentando manter esta aplicação bastante leve ).

Resposta

Depois de uma investigação mais aprofundada Acontece que este estava sendo causado pelo tema jQuery UI que eu estava usando, este foi o estilo problemático:

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

Eu só removeu o padding-bottom:. .1em e resolver o problema (a pista foi que a segunda fileira de elementos estavam se movendo junto com a seleção mudando)

Answer 1

Você não precisa realmente uma extensão de todo. Basta usar flutuante LI da UL com um sem estilo. As Li deve envolver adequadamente. Geralmente uma boa idéia para garantir palavras na mesma guia não envolvê substituindo "" com "".

O meu controle guia personalizado é criada dinamicamente com ASP.Net, mas a tabulação ea funcionalidade hide / show é tudo 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

Nem uma solução técnica, mas tenha em mente que Nielsen recomenda fortemente contra várias linhas de guias:

Há apenas uma linha de guias. Múltiplo linhas criar saltando elementos de interface do usuário, que destruir a memória espacial e, assim, tornar impossível para os usuários a lembrar quais guias que já visitou. Além disso, é claro, várias linhas são uma certeza sintoma de complexidade excessiva: Se você precisar de mais guias do que vai caber uma única linha, você precisa para simplificar o seu design.

- Tabs, usado direito: As diretrizes de usabilidade 13

Answer 3

Este problema é descrito em um relatório de bug no issue tracker jQuery UI. Em que relatório de erros, I anexa um emplastro que resolve este problema ao preservando a fronteira .ui-tabs-nav abaixo abas não seleccionados. Felicidades.

Answer 4

eu não gosto da maneira como guias prestados ao quebrar a uma segunda linha, então eu escrevi um plugin para introduzir um "ver mais" guia em vez de quebrar para uma segunda linha.

https://github.com/jasonday/plusTabs

Answer 5

I, o seguinte foi útil para guias classificáveis ??em várias linhas. Uma das questões que tive foi que as guias não encaixar corretamente a menos axis: 'x' foi especificado, mas esta parecia feio quando arrastando entre linhas.

Eu consegui melhorar isso com o seguinte:

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

Há um monte de grandes respostas que podem ser usados ??para totalmente resolver o problema, mas aqui é a minha própria ¢ 2.

Para assuntos simplificar muito, você pode simplesmente adicionar um <hr> denominado como você gosta de separar as linhas de guias. Na minha opinião isso também parece mais agradável do que ter linhas abertas.