Como criar painéis flexíveis com jQuery no Dreamweaver
O Widget de acordeão jQuery UI no Dreamweaver facilita para adicionar painéis flexíveis que os visitantes do site podem abrir e fechar sem atualizar a página web. Este recurso jQuery permite que você faça o melhor uso do espaço em uma página exibindo mais informação em menos espaço em uma janela do navegador.
Você pode ver como o acordeão painéis flexíveis contêm as preferências nome, foto e habitat de cada Songbird neste website natureza. O resultado é que você pode ver facilmente os nomes de todas as aves em uma página. Para ver a descrição de qualquer ave, um usuário só precisa clicar na guia na parte superior do painel (onde o nome do pássaro parece), e o painel abre instantaneamente.
A foto e descrição para a toutinegra coroada de laranja é aberta enquanto os outros na página estão fechados. A beleza do jQuery é que a página não precisa ser recarregado para os painéis para abrir ou fechar. Clique uma vez em uma guia e um painel abre instantaneamente. Clique em outra guia, e que o painel é aberto como o painel aberto anteriormente fecha.
painéis flexíveis pode ser usado para exibir texto e imagens, bem como arquivos multimídia, como áudio, vídeo e arquivos Flash.
Para exibir um painel de acordeão (ou muitos outros recursos avançados no Dreamweaver) como ele aparecerá em um navegador da web, você precisa clicar no botão Exibição ao vivo no canto superior esquerdo da área de trabalho do Dreamweaver.
Depois de criar um conjunto de painéis de acordeão com o menu jQuery UI no Dreamweaver, você pode alterar uma série de definições do painel usando o Inspetor de propriedades, como mostrado nas instruções que se seguem.
Siga estes passos para criar um conjunto de painel de acordeão:
Coloque o cursor em uma página onde deseja que os painéis de acordeão a aparecer.
Escolha Inserir-jQuery UI-Accordion, ou clique no item de acordeão no painel jQuery UI Inserir.
Um grupo de painéis de acordeão dobrável jQuery UI com três painéis aparece na página.
Selecione a palavra Seção no topo de cada painel, e substituí-lo com o texto que deseja que apareça na área de guia do painel.
Por padrão, o texto na área de Tab é texto simples, mas você pode mudar isso alterando a regra CSS correspondente ou formatar o texto usando tags HTML, como as tags de cabeçalho.
Selecione a palavra Conteúdo na área principal da cada painel, e entrar em qualquer texto ou imagens que você deseja exibir.
Você pode colar texto em um painel da mesma maneira que você colar texto em qualquer outro lugar na página. Da mesma forma, você inserir imagens em painéis tal como faria em qualquer outro lugar em uma página: Coloque o cursor no painel, escolha Inserir-Imagem-Imagem e selecione o GIF, JPEG ou PNG que deseja exibir. Você também pode selecionar um arquivo de Photoshop, se você quiser usar o Dreamweaver para otimizar imagens.
Quando você colar texto em um painel, escolha Editar-Colar especial para escolher a quantidade de formatação que pretende preservar no texto que você colar no Dreamweaver. Limitar a quantidade de formatação preservada pode reduzir potenciais conflitos de estilo.
Para alterar as configurações do painel, clique na guia azul jQuery acordeão na parte superior dos painéis na área de design.
Quando você clique na guia azul, as configurações do painel aparecem no Inspetor de propriedades. (Clicando corretamente a guia azul pode ser complicado, por isso certifique-se de clicar na área azul.) Clique em qualquer outro lugar na página, e o inspector retorna às suas configurações padrão.
Adicionar ou remover painéis usando o campo Painéis no Inspetor de propriedades.
Para adicionar um painel, clique no sinal de mais (+) à direita do campo de painéis. Para remover um painel de um conjunto acordeão, primeiro selecione o nome do painel na lista drop-down Painéis no Inspetor de propriedades e, em seguida, clique no sinal de menos (@@ min).
Você pode adicionar outro painel, clicando no sinal de mais novo.
Alterar a forma como os painéis são abertos usando o menu drop-down de eventos.
As configurações de Eventos controlar se os painéis de abrir quando um usuário clica em uma guia de painel (Clique) ou rola um cursor sobre a aba de painel (Mouseover).
Defina outras opções do painel, conforme desejado.
As opções de acordeão no Inspetor de propriedades são opcionais e incluem a capacidade de desativar qualquer ou todos os painéis (Disable) e animar a forma como os painéis de abrir e fechar (lista suspensa Animate).
Escolha Arquivo-Salvar para salvar o page- quando a caixa de diálogo Copy Dependent arquivos aparecer, clique em OK para gerar todos os arquivos relacionados.
Para que os recursos do Spry para trabalhar, você deve fazer o upload desses arquivos para o servidor web quando você carregar a página web.
Para alterar a aparência do painel, tais como a cor font face ou texto, editar a regra CSS correspondente.
Nota: Você não pode editar os estilos correspondentes para um painel de acordeão até que a página foi guardada e Dreamweaver gerou o javascript arquivos CSS correspondente e.
Para ver como os painéis serão exibidos em um navegador da Web, clique no ícone de globo na parte superior da área de trabalho e selecione o navegador que você deseja usar para visualizar a página.
Quando você estiver usando o computador para visualizar uma página que tem uma característica interativa que requer javascript ou outra programação, alguns navegadores, incluindo o Internet Explorer, será exibido um aviso informando que você deve permitir que os controles ActiveX para visualizar a página.
Este é um aviso de segurança que aparece somente quando a página é aberta no mesmo computador onde a página é salva. Se você publicar a página para um servidor web e, em seguida, visualizá-lo através de uma conexão Internet, este erro não aparecerá para você ou seus visitantes do site.