Trabalhar com o widget Painéis com aba do Spry

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:

Widget Painéis com aba

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

  1. Selecione Inserir > Spry > Painéis com aba do Spry.
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

  1. Selecione um widget Painéis com aba na janela Documento.
  2. Clique no botão de adição de Painéis no Inspetor de propriedades (Janela > Propriedades).
  3. (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

  1. Selecione um widget Painéis com aba na janela Documento.
  2. 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

  1. 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

  1. Selecione um widget Painéis com aba na janela Documento.
  2. No menu Painéis do Inspetor de propriedades (Janela > Propriedades), selecione o nome do painel que você deseja mover.
  3. 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.

  1. Selecione um widget Painéis com aba na janela Documento.
  2. 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.

  1. 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

  1. 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.

  1. 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.

  2. Adicione um valor e uma propriedade de largura à regra. Por exemplo largura: 300px;.

Artigos relacionados

 Adobe

Receba ajuda com mais rapidez e facilidade

Novo usuário?

Adobe MAX 2024

Adobe MAX

The Creativity Conference

14 a 16 de outubro, Miami Beach e online

Adobe MAX 2024

Adobe MAX

The Creativity Conference

14 a 16 de outubro, Miami Beach e online