Video: Menu Sanfona com HTML5, CSS3 e jQuery - #013.2

Algumas das mais poderosas ferramentas jQuery são realmente o mais fácil de usar em HTML5 e CSS3 programação. O Widget de acordeão tornou-se uma parte extremamente popular do conjunto de ferramentas jQuery UI.

Video: HTML5 CSS3 javascript AJAX

Aqui, você vê títulos de livros. Os detalhes para o primeiro estão disponíveis, mas os detalhes dos demais livros estão ocultas.

Este efeito maravilhoso permite que o usuário se concentrar em uma determinada parte de um contexto maior ao ver o contorno geral. É chamado de um acordeão porque as várias partes se expandem e contraem para permitir que o usuário se concentrar em uma parte sem perder lugar da sua posição. conteúdo dobrável tornou-se uma ferramenta de usabilidade importante que se tornou popular pela barra do sistema no Mac OS e outras ferramentas de usabilidade populares.

O efeito sanfona é surpreendentemente fácil de conseguir com jQuery:

acordeão Demonstração
Livro I - Criação da Fundação HTML
Fundações HTML som
É toda sobre Validação
Escolhendo suas Ferramentas
Gestão da Informação com listas e tabelas
Fazendo Conexões com links
adicionando Imagens
criação de formulários
Livro II - Styling com CSS
Colorir o mundo
styling Texto
Seletores, classe e estilo
Borders and Backgrounds
Níveis de CSS
Livro III - Usando CSS posicional para o layout
Diversão com o Float Fabulous
Construção Floating layouts de página
Listas de styling e Menus
Usando Posicionamento alternativa
Video: HTML5-CSS-javascript - Seletores CSS

Como você pode ver pelo olhar sobre o código, é principalmente apenas HTML. O efeito é muito fácil de realizar:

1. Importar todos os suspeitos do costume.

   Você precisa importar o jQuery e arquivos javascript jQuery UI, e um arquivo de tema CSS. Você também precisa ter certeza de que o CSS tem acesso à imagens diretório com ícones e fundos, porque ele vai usar algumas dessas imagens automaticamente.

2. 
   
   
   

   Construa sua página HTML como normal.

   Criar uma página HTML como você faria normalmente. Preste atenção para as seções que deseja entrar em colapso. Há normalmente deve ser um tag título para cada elemento, tudo ao mesmo nível.

3. Criar um div que contém todo o conteúdo desmontável.

   Colocar todo o conteúdo dobrável em uma única div com um ID. Você vai estar virando esta div em um elemento jQuery acordeão.

4. Adicionar uma âncora em torno de cada título que você deseja especificar como desmontável.

   Coloque uma marca de âncora vazia () Em torno de cada título que você deseja usar como cabeçalho desmontável. O sinal indica que a âncora irá chamar a mesma página e é usado como um espaço reservado pelo motor jQuery UI. Você pode adicionar a âncora diretamente no HTML ou através de código jQuery.

5. Criar uma jQuery nisso()função.

   Use as técnicas normais para construir uma initializer jQuery.

6. Aplique o acordeão() método para o div.

   Video: Curso de Dreamweaver CC. 23. Widgets de jQuery

   Use jQuery para identificar a div que contém o conteúdo dobrável e aplicar acordeão() a ele:

    função init () {$ ("#acordeão").acordeão()-}