Como criar painéis dobrá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.
Conteúdo
Você pode ver como o acordeão painéis dobrá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 no topo 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 tem que 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 se abre como o painel aberto anteriormente fecha.
painéis dobrá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:
Video: Criando um painel de administração em PHP - Aula 01
Coloque o cursor em uma página onde deseja que os painéis de acordeão a aparecer.
Escolha Inserir → jQuery UI → acordeão, ou clique no item Acordeão no painel jQuery UI Inserir.
Um grupo de painéis 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 você quer que apareça na área de guia do painel.
Video: Curso - Dreamweaver - Crear Formulario
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 do título.
Selecione a palavra Conteúdo na área principal da cada painel, e digite 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 como faria em qualquer outro lugar em uma página: Posicione 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 no topo 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, eo inspetor 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 um outro painel, clicando no sinal de mais novo.
Video: Aula 01 Apresentação do Curso - Criando Painel Administrativo de sistemas web
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 abrir quando um usuário clica em uma guia do painel (Clique) ou rola um cursor sobre a aba do painel (Mouseover).
Definir outras opções do painel, como 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 (Desativar) 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 salvo 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 no topo 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 Internet Explorer, irá exibir 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 em que a página é salva. Se você publicar a página para um servidor web e, em seguida, vê-lo através de uma conexão Internet, este erro não aparecerá para você ou seus visitantes do site.