Selecione Inserir > Spry > Painel flexível do Spry.
Última atualização em
13 de fev de 2023
Observação:
Os widgets do Spry foram substituídos pelos widgets do jQuery no Dreamweaver CC e posterior. Embora ainda possa modificar os widgets do Spry existentes na página, você não pode adicionar novos.
Sobre o widget Painel flexível
O widget Painel flexível é um painel que pode armazenar conteúdo em um espaço compacto. Para ocultar ou expor o conteúdo armazenado no Painel flexível, o usuário clica na aba do widget. Este exemplo mostra um widget Painel flexível, expandido e recolhido:
A. Expandido B. Recolhido
O HTML do widget Painel flexível compõe-se de uma tag div externa que contém a tag div do conteúdo e a tag div do recipiente da aba. O HTML do widget Painel flexível também inclui tags de script no cabeçalho do documento e após o markup HTML do Painel flexível.
Para obter uma explicação mais abrangente sobre como o widget Painel flexível funciona, inclusive uma anatomia completa do código desse widget, consulte www.adobe.com/go/learn_dw_sprycollapsiblepanel_br.
Inserir e editar o widget Painel flexível
Inserir o widget Painel flexível
Observação:
Para inserir um widget Painel flexível, você também pode usar a categoria Spry no painel Inserir.
Abrir ou fechar o Painel flexível na Visualização de design
-
Siga um destes procedimentos:
Mova o ponteiro do mouse sobre a aba do painel na Visualização de design e clique no ícone em forma de olho que aparece à direita da aba.
Selecione um widget Painel flexível na janela Documento e selecione Aberto ou Fechado no menu pop-up Exibir, no Inspetor de propriedades (Janela > Propriedades).
Definir o estado padrão de um widget Painel flexível
Você pode definir o estado padrão (aberto ou fechado) do widget Painel flexível quando a página da Web é carregada no navegador.
-
Selecione um widget Painel flexível na janela Documento.
-
No Inspetor de propriedades (Janela > Propriedades), selecione Aberto ou Fechado no menu pop-up Estado padrão.
Ativar ou desativar a animação do widget Painel flexível
Por padrão, quando você ativa animação para um widget Painel flexível, o painel abre e fecha lenta e gradualmente quando o visitante do site clica na aba do painel. Se você desativa a animação, o painel flexível abre e fecha abruptamente.
-
Selecione um widget Painel flexível na janela Documento.
-
No Inspetor de propriedades (Janela > Propriedades), marque ou desmarque Ativar animação.
Personalizar o widget Painel flexível
Embora o Inspetor de propriedades permita que você faça edições simples em um widget Painel flexível, ele não aceita tarefas de estilização personalizadas. Você pode alterar as regras de CSS para o dispositivo Painel flexível e criar um painel flexível com o estilo de sua preferência.
Para obter uma referência rápida sobre como alterar as cores no dispositivo Contrair painel, consulte o Guia rápido para painéis com guias, acordeões e contrair painéis de David Powers.
Para obter uma lista mais avançada de tarefas de estilização, consulte www.adobe.com/go/learn_dw_sprycollapsiblepanel_custom_br.
Todas as regras de CSS nos tópicos a seguir se referem às regras padrão localizadas no arquivo SpryCollapsiblePanel.css. O Dreamweaver salva o arquivo SpryCollapsiblePanel.css na pasta SpryAssets do site sempre que você cria um widget Painel flexível do Spry. Esse arquivo também contém informações úteis comentadas sobre vários estilos que se aplicam ao widget.
Observação:
Embora você possa facilmente editar regras para o widget Painel flexível diretamente no arquivo CSS relacionado, você também pode usar o painel Estilos CSS para editar o CSS do painel flexível. Esse painel é útil para localizar as classes de CSS atribuídas a diversos trechos do widget, especialmente se você usar o modo Atual do painel.
Criar estilo de texto do widget Painel flexível
Para criar o estilo do texto de um widget Painel flexível, configure as propriedades do recipiente inteiro do widget Painel flexível ou configure as propriedades dos componentes do widget individualmente.
-
Para alterar o formato do texto de um widget Painel flexível, use a seguinte tabela para localizar a regra de CSS apropriada e, em seguida, adicionar os seus próprios valores e propriedades de estilo do texto:
Estilo a alterar
Regra de CSS relevante
Exemplo de propriedades e valores a adicionar ou alterar
Texto no painel flexível inteiro
.CollapsiblePanel font: Arial; font-size:medium;
Texto na aba do painel apenas
.CollapsiblePanelTab font: bold 0.7em sans-serif; (este é o valor padrão.)
Texto no painel de conteúdo apenas
.CollapsiblePanelContent font: Arial; font-size:medium;
Alterar as cores de fundo do widget Painel flexível
-
Para alterar as cores de fundo de diversas partes de um widget Painel flexível, use a seguinte tabela para localizar a regra de CSS apropriada e, em seguida, adicionar ou alterar as propriedades e os valores da cor de fundo de sua preferência:
Cor a alterar
Regra de CSS relevante
Exemplo de propriedade e valor a adicionar ou alterar
Cor de fundo da aba do painel
.CollapsiblePanelTab background-color: #DDD; (este é o valor padrão.)
Cor de fundo do painel de conteúdo
.CollapsiblePanelContent background-color: #DDD;
Cor de fundo da aba quando o painel está aberto
.CollapsiblePanelOpen .CollapsiblePanelTab background-color: #EEE; (este é o valor padrão.)
Cor de fundo da aba do painel aberta quando o ponteiro do mouse passa por cima
.CollapsiblePanelTabHover, .CollapsiblePanelOpen .CollapsiblePanelTabHover background-color: #CCC; (este é o valor padrão.)
Limitar a largura de um painel flexível
Por padrão, o widget Painel flexível se expande até ocupar o espaço disponível. Entretanto, você pode restringir a largura de um widget Painel flexível configurando uma propriedade de largura para o recipiente do painel flexível.
-
Localize a regra CSS do arquivo .CollapsiblePanel abrindo o arquivo SpryCollapsible Panel.css. Essa regra define propriedades para o principal elemento recipiente do widget Painel flexível.Observação:
Você também pode localizar a regra selecionando o widget Painel flexível e verificando o painel Estilos CSS (Janela > Estilos CSS). Verifique se o painel está definido no modo Atual.
-
Adicione um valor e uma propriedade de largura à regra. Por exemplo largura: 300px;.