Selecione Inserir > Spry > Painéis com aba do Spry.
Última atualização em
May 05, 2021 02:00:58 AM GMT
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 Painéis com aba
O widget Painéis com aba é um conjunto de painéis que podem armazenar conteúdo em um espaço compacto. Os visitantes do site ocultam ou revelam o conteúdo armazenado nos Painéis com aba clicando na aba do painel que eles desejam acessar. Os painéis do widget abrem de acordo com as abas em que o visitante clica. Em um widget Painéis com aba, somente um painel de conteúdo é aberto em determinado momento. Este exemplo mostra um widget Painéis com aba, com o terceiro painel aberto:
A. Aba B. Conteúdo C. Widget Painéis com aba D. Painel com aba
O código HTML do widget Painéis com aba consiste em uma tag div externa que contém todos os painéis, uma lista das abas, um div para conter os painéis de conteúdo e um div para cada painel de conteúdo. O HTML do widget Painéis com aba também inclui tags de script no cabeçalho do documento e após o markup HTML do widget Painel com aba.
Para obter uma explicação abrangente sobre como o widget Painéis com aba funciona, inclusive uma anatomia completa do respectivo código, consulte www.adobe.com/go/learn_dw_sprytabbedpanels_br.
Inserir e editar o widget Painéis com aba
Inserir o widget Painéis com aba
Observação:
Para inserir um widget Painéis com aba, você também pode usar a categoria Spry no painel Inserir.
Adicionar um painel em um widget Painéis com aba
-
Selecione um widget Painéis com aba na janela Documento.
-
Clique no botão de adição de Painéis no Inspetor de propriedades (Janela > Propriedades).
-
(Opcional) Altere o nome da aba selecionando o texto da aba na Visualização de design.
Excluir um painel de um widget Painéis com aba
-
Selecione um widget Painéis com aba na janela Documento.
-
No menu Painéis do Inspetor de propriedades (Janela > Propriedades), selecione o nome do painel a ser excluído e clique no botão de subtração.
Abrir painel para edição
-
Siga um destes procedimentos:
Mova o ponteiro do mouse sobre a aba do painel para abri-lo na Visualização de design e clique no ícone em forma de olho que aparece à direita da aba.
Selecione um widget Painéis com aba na janela Documento e clique no nome do painel para editá-lo no menu Painéis do Inspetor de propriedades (Janela > Propriedades).
Alterar a ordem dos painéis
-
Selecione um widget Painéis com aba na janela Documento.
-
No menu Painéis do Inspetor de propriedades (Janela > Propriedades), selecione o nome do painel que você deseja mover.
-
Clique nas setas para cima e para baixo para mover o painel para cima ou para baixo.
Definir o painel aberto padrão
Você pode definir qual painel do widget Painéis com aba abre por padrão quando a página é aberta no navegador.
-
Selecione um widget Painéis com aba na janela Documento.
-
No Inspetor de propriedades (Janela > Propriedades), selecione o painel que você deseja abrir por padrão no menu pop-up Painel padrão.
Personalizar o widget Painéis com aba
Embora o Inspetor de propriedades permita que você faça edições simples em um widget Painéis com aba, ele não aceita tarefas de estilização personalizadas. Você pode alterar as regras de CSS para o dispositivo Painéis com aba e criar um dispositivo com o estilo de sua preferência.
Para obter uma referência rápida sobre como alterar as cores no dispositivo Painéis com guias, 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_sprytabbedpanels_custom_br.
Todas as regras de CSS nos tópicos a seguir se referem às regras padrão localizadas no arquivo SpryTabbedPanels.css. O Dreamweaver salva o arquivo SpryTabbedPanels.css na pasta SpryAssets do seu site sempre que você cria um widget Painéis com aba 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 Painéis com aba diretamente no arquivo CSS relacionado, você também pode usar o painel Estilos CSS para editar o CSS do widget. 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 o estilo do texto do widget Painéis com aba
Para criar o estilo do texto de um widget Painéis com aba, configure as propriedades do recipiente inteiro do widget Painéis com aba ou configure as propriedades dos componentes do widget individualmente.
-
Para alterar o estilo do texto de um widget Painéis com aba, use a seguinte tabela para localizar a regra de CSS apropriada e, em seguida, adicionar seus próprios valores e propriedades de estilo do texto:
Texto a ser alterado
Regra de CSS relevante
Exemplo de propriedades e valores a adicionar
Texto no widget inteiro
.TabbedPanels font: Arial; font-size:medium;
Texto nas abas do painel apenas
.TabbedPanelsTabGroup ou .TabbedPanelsTab font: Arial; font-size:medium;
Texto nos painéis de conteúdo apenas
.TabbedPanelsContentGroup ou .TabbedPanelsContent font: Arial; font-size:medium;
Alterar as cores de fundo do widget Painéis com aba
-
Para alterar as cores de fundo de diversas partes de um widget Painéis com aba, 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 das abas do painel
.TabbedPanelsTabGroup ou .TabbedPanelsTab background-color: #DDD; (este é o valor padrão.)
Cor de fundo dos painéis de conteúdo
.Tabbed PanelsContentGroup ou .TabbedPanelsContent background-color: #EEE; (este é o valor padrão.)
Cor de fundo da aba selecionada
.TabbedPanelsTabSelected background-color: #EEE; (este é o valor padrão.)
Cor de fundo das abas do painel quando o ponteiro do mouse passa por cima
.TabbedPanelsTabHover background-color: #CCC; (este é o valor padrão.)
Restringir a largura dos painéis com aba
Por padrão, o widget Painéis com aba se expande até ocupar o espaço disponível. Entretanto, você pode restringir a largura de um widget Painéis com aba configurando uma propriedade de largura para o recipiente do acordeão.
-
Abra o arquivo SpryTabbedPanels.css para localizar a regra de CSS .TabbedPanels. Essa regra define propriedades para o principal elemento recipiente do widget Painéis com aba.Observação:
Você também pode localizar a regra selecionando o widget Painéis com aba 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;.
Artigos relacionados
Fazer logon em sua conta