Índice
Existem muitas maneiras de fazer abas e acordeões, mas definitivamente jQuery e seu pacote de biblioteca jQuery UI nos fornecem a maneira mais rápida e eficiente de implementar esses elementos.Cílios
As guias nos permitem agrupar as informações em nosso site por tópico, permitindo que os usuários obtenham informações relevantes de forma rápida e fácil, bastando selecionar a guia que desejam.
O método tabs ()
O método guias(options) declara que um elemento do HTML e seu conteúdo devem ser exibidos em abas, o parâmetro das opções é um objeto que especifica a aparência e o comportamento das abas.
O método tabs () pode ser usado de duas maneiras:
• $ (seletor, contexto) .tabs (opções)
• $ (seletor, contexto) .tabs ("ação", parâmetros)
Vejamos um exemplo de sua implementação:
- Incluímos os arquivos necessários, as bibliotecas de jQuery e os CSS:
- Criamos nossa instância do método tabs () e nós o associamos a um seletor:
- Finalmente em nosso HTML criamos o conteúdo que será formatado em nossas abas, é importante mencionar que deve estar de acordo com a estrutura de tagsentão os rótulos
- e finalmente rótulospara o método de identificar cada guia.
- Nunc tincidunt
- Dor Proin
- Lacínia de Eneia
- Incluímos os arquivos necessários, as bibliotecas de jQuery e os CSS:
- Criamos nossa instância do método acordeão () e nós o associamos a um seletor:
- Por fim, criamos nosso HTML respeitando a estrutura de uma taggeral seguido por outras tagsque servirá para identificar cada bloco.
- Criar uma contaCadastre-se GRATUITAMENTE para ter sua conta SolveticRegistre uma conta
- IdentificarVocê já tem uma conta? Cadastre-se aquiIdentifique-me em minha conta
- Publicados 12 de agosto de 2013 00:54
- Visitas 3,7 K
- NívelProfissional
- Como atualizar o NPM com PowerShell no Windows 10
- Como arrastar e capturar imagens com JQuery UI
- Como fazer um Spinner ou ícone de carregamento com JQuery
- Como ter um site traduzido em vários idiomas
Vamos ver como fica este exemplo em nosso navegador:
JQuery UI Tabs - Funcionalidade padrão
Teste da guia 1.
Morbi tincidunt, dui sit amet facilisis feugiat, Eu odeio metus gravida antes, ut pharetra massa metus id nunc. Duis scelerisque irrita turpis. Sede, fringilha, massa eget luctus maleuada, metus eros desconforto lectus, ut tempus eros massa ut dor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.
Teste da guia 3.
Acordeão
Tal como os separadores, o acordeão organiza a informação com a particularidade de o fazer por blocos nos quais apenas a informação do bloco que foi seleccionado será apresentada enquanto os restantes permanecem ocultos.
O método acordeão ()
O método acordeão (opções) especifica que um elemento do HTML e seu conteúdo serão gerenciados como menus do tipo sanfona. Como o método de tabs, as opções especificarão seu comportamento e aparência.
O método acordeão () pode ser usado de duas maneiras:
• $ (seletor, contexto) .accordion (opções)
• $ (seletor, contexto) .accordion ("ação", parâmetros)
Vejamos um exemplo de sua implementação:
Nosso exemplo ficará assim no navegador:
Este tutorial ajudou você?
Se nãoAJUDE A MELHORAR ESTE TUTORIAL!
Você acha que pode corrigir ou melhorar este tutorial? Você pode enviar sua Edição com as alterações que considerar úteis.0 usuários editaram este tutorial. Edite e torne-se um especialista reconhecido!
Edite este tutorial
TUTORIAIS SEMELHANTES
Como arrastar e capturar imagens com JQuery UIComo fazer um Spinner ou ícone de carregamento com JQueryPlug-ins e bibliotecas JQuery para desenvolvimento webGrade dinâmica Flexigrid com JQuery e PHPExpressões regulares com JqueryGerenciando tabelas dinâmicas com o plug-in Jquery DatatablesCompreendendo AJAX com jQueryFiltros em seletores com Jquery e CSS3 II
Nenhum comentário, seja o primeiro!
Não espere mais e entre no SolveticDeixe seus comentários e aproveite a conta de usuário Junte-se a nós!Em formação
Tutoriais de JavaScript mais recentes
