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

Mapa do site


SimpleUi

Atualizando

Código para Aba Download

? - +
Navegação por abas
  1. Crie uma lista <ul> e <li>’s, onde cada item da lista será uma aba
    • No <ul> use a class ui_tab
    • 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="minhaAba"
  2. Ao fechar a lista (</ul>), crie uma <div> para cada conteúdo de item da aba.
    • As div’s devem possuir uma classe ui_tabContent e um id de acordo com o href da aba de referência (ex: minhaAba)
Pronto! Isso é suficiente. Caso queira, você pode customizar a função:
  1. Se achar necessário, gere o permalink para cada uma das abas:
    • Para isso, insira o atributo data-link="true" na tag <ul>. Dessa forma, é possível capturar a URL após clicar em uma 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.
    • Já o nome de cada aba será o próprio id de cada li filho de ui_tab.
  2. Por padrão, as abas ocupam toda a largura destinada à elas
    • Nesse caso, a largura será dividida uniformemente pelo número de 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 abas não ocupem toda a largura, use em ui_tab o atributo data-full="false", onde cada aba terá a largura fluida de acordo com o respectivo conteúdo; ou data-full="equal", onde a largura das abas serão iguais, determinada pelo tamanho da maior.
    • Caso queira, o atributo data-align pode definir o alinhamento das 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 abas. (isso não ocorre quando data-full é igual a true ou vazio)
  1. O espaçamento entre as abas pode ser obtido por meio da propriedade margin. Use margin-left e margin-right no li da aba.
    Dica: Não são obrigatórios, mas lembre-se de :last-child e :first-child para tratar a primeira e a última 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 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 abas

Mostrar aba(s)

Aba padrão

Abrir inicialmente na ª aba

Layout

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

Caminho

Ao clicar na 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 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 aba.
O nome do parãmetro de URL será Padrâo: aba
Tem certeza que deseja reiniciar todos os valores?

Resultado para Aba