Você está usando um navegador desatualizado. Para a visualização correta, atualize seu navegador:

Mapa do site


SimpleUi

Atualizando

Código para Sub aba Download

? - +
Navegação por sub-abas
  1. Pré-requisito
    • Possuir uma estrutura em Abas
  2. Dentro de um conteúdo de uma aba: crie uma lista <ul> e <li>’s, onde cada item da lista será uma sub-aba
    • No <ul> use a class ui_tabsub.
    • Em cada <li>, insira links (<a>’s). Nesses links, use o atributo href para identificar o conteúdo que será aberto (veja o próximo item desse tutorial), ex: href="minhaSubAba"
  3. Ao fechar a lista (</ul>), crie uma <div> para cada conteúdo de item da sub-aba.
    • As div’s devem possuir uma classe ui_tabsubContent e um id de acordo com o href da aba de referência (ex: minhaSubAba)
Pronto! Isso é suficiente. Caso queira, você pode customizar a função:
  1. Se achar necessário, gere o permalink para cada uma das sub-abas:
    • Para isso, insira o atributo data-link="true" na tag <ul>. Dessa forma, é possível capturar a URL após clicar em uma sub-aba, seja para compartilhar ou abrir através de um endereço específico.
    • Caso queira, altere o nome do parâmetro por meio do atributo data-link-name e informe o valor desejado no ul.
  2. Por padrão, as sub-abas ocupam toda a largura destinada à elas
    • Nesse caso, a largura será dividida uniformemente pelo número de sub-abas presentes. Ou seja, esse número pode não ser inteiro e alguns navegadores antigos não interpretam decimal de pixels. Independente disso, não há malefícios à função
    • Para que as sub-abas não ocupem toda a largura, use em ui_tabsub o atributo data-full="false", onde cada sub-aba terá a largura fluida de acordo com o respectivo conteúdo; ou data-full="equal", onde a largura das sub-abas serão iguais, determinada pelo tamanho da maior.
    • Caso queira, o atributo data-align pode definir o alinhamento das sub-abas, através dos valores left (padrão), center e right.
    • Vale lembrar que se data-full="false" ou data-full="equal" for usado, o padding-right e padding-left de li terão efeito sobre as sub-abas. (isso não ocorre quando data-full é igual a true ou vazio)
  1. O espaçamento entre as sub-abas pode ser obtido por meio da propriedade margin. Use margin-left e margin-right no li da sub-aba.
    Dica: Não são obrigatórios, mas lembre-se de :last-child e :first-child para tratar a primeira e a última sub-aba, caso necessário.
  2. Também é possível manter a borda abaixo das abas. Para isso, use o atributo data-keep-border-bottom="true" na lista </ul>.
  3. Após o clique nas abas, usuários avançados podem implementar uma função do tipo callback
    • Para isso, crie a função callback_tab(obj) e implemente as ações que irão ocorrer após o clique em uma das sub-abas, onde obj é objeto (<li>) clicado.
    • Essa função não é obrigatória, ou seja, só será executada se existir. Caso positivo, para evitar duplicidades, lembre-se de implementar a função callback em arquivos específicos, presentes nas respectivas páginas finais, já que o seu objetivo não é genérico.
Customizar


Quantidade de sub-abas

Mostrar sub-aba(s)

Sub-aba padrão

Abrir inicialmente na ª sub-aba

Layout

As sub-abas . Padrão: Sim (true)
O alinhamento será à(ao) . Padrão: Esquerda (left)

Caminho

Ao clicar na sub-aba, a URL o caminho clicado. Padrâo: não exibir (false) Saiba mais
Os navegadores modernos são capazes de trocar a url em tempo de execução.
Uma vez habilitada, as sub-abas geram links permanentes, facilitando o acesso ao conteúdo.
Habilte essa função e observe a barra de endereço do navegador ao clicar na sub-aba.
O nome do parãmetro de URL será Padrâo: subaba
Tem certeza que deseja reiniciar todos os valores?

Resultado para Sub aba