Ajax – Painéis Sanfonados

Nesse tutorial será mostrado com criar um painel sanfonado com o Spry Accordion de diversas maneira, uma de modo mais ágil com apenas um cliques, mais comprometendo a semântica e outro de modo não obstrutivo com a utilização do SpryDOMUtils.js. E ainda como carregar o conteúdo dos painéis com outra página sem a necessidade de atualizar a página, e uma breve descrição de como customizar os painéis.Veja um exemplo de Painéis Sanfonados utilizando o Spry Accordion

Conteúdo

Crie uma nova página, pode ser em qualquer formato. Na Barra Inserir do Dreamweaver selecione a guia Spry e clique no botão Spry Accordion.

O Dreamweaver vai automaticamente criar o Spry Accordion com dois painéis. Você pode inserir ou remover os painéis facilmente utilizando o Painel de Propriedades, para utilizá-lo verifique se os painéis estão com uma borda azul.

As opções fornecidas no Painel de Propriedades do Spry Accordion são:
1. Nome do Painel
2. Adiciona ou remove os painéis, sinal de “mais” para adicionar e sinal de “menos” para remover
3. Ordenar a seguencia dos painéis, selecione um painel na caixa de visualização dos painéis e clique na seta para “cima” para mover o painel para cima e na seta para “baixo” para mover o painel para baixo
4. Customize this widget, remove os stilos gerados automaticamente para que você possa customizá-lo (não recomendado).

Criando painéis sanfonados não obstrutivos

Com os painéis criados e configurados, entre no modo de visualização de código (Shown Code View) do Dreamweaver. No final da página observe que o Dreamweaver criou um bloco de código em JavaScript com as configurações do Spry Accordion, obstruindo o código HTML.

Se apenas apagar esse código os painéis não vão funcionar. Para que os painéis funcionem corretamente de modo não-obstrutivo é necessário três etapas: (1) apagar esse bloco de codigo que o Dreamweaver criou, (2) Inserir dentro da TAG HEAD o SpryDOMUtils.js que é um novo arquivo JS do Spry criado recentemente justamente para resolver esse problema de obstrução do Spry, muito criticado por desenvolvedores de respeitam e prezam a semântica. e (3) criar um novo arquivo JS com uma função para passa os parâmetros de configuração do Spry Accordion. Para criar esse arquivo, crie uma nova página (Ctrl + N) de javascript e crie uma nova função utilizando o Spry.Utils.addLoadListener (pertencente ao arquivo SpryDOMUtils.js).e configure criando uma variável (Accordion1)e passando o ID da DIV principal (Accordion1) onde todos os painéis estão dentro.

var Accordion1;
Spry.Utils.addLoadListener(function()
{
Spry.$$(“#Accordion1″).forEach(function(n) { Accordion1 =new Spry.Widget.Accordion(“Accordion1″);});
});

Agora feche, e volte para a página que estão os painéis e insira esse arquivo dentro da tag HEAD, verifique se todos arquivos estão inserido

<head>
<script src=”SpryAccordion.js” type=”text/javascript”></script>
<script language=”javascript” type=”text/javascript” src=”SpryDOMUtils.js”></script>
<script language=”javascript” type=”text/javascript” src=”accordion_naoobstrutivo.js”></script>
<link href=”SpryAccordion.css” rel=”stylesheet” type=”text/css” />
</head>

Carregando o conteúdo dos painéis sem atualizar a página

Para fazer a atualização do conteúdo sem a necessidade de ficar recarregando a página, simulando um iframe utilizaremos a função Spry.Utils.updateContent que já foi abordado nesse tutorial. Para utilizar essa função faça a inclusão do o arquivo SpryData.js do Frameworks Spry dentro da tag Head

<script language=”javascript” type=”text/javascript” src=”SpryData.js”></script>

Vamos adicionar os links e a função Spry.Utils.updateContent junto com a função onClick,para que quando o usuário clique no nome do painel a função Spry.Utils.updateContent faça o update dentro do painel. Na DIV que contém o titulo do painel inclua a função e passe dois parâmetros: o primeiro é a ID da DIV onde o conteúdo será carregado e o segundo é o endereço da página que será carregada.

<div class=”AccordionPanelTab”onclick=”Spry.Utils.updateContent(‘tb2′,’painel_1.html’);“>Label 2</div>

Agora dentro da DIV que armazena o conteúdo do painel identifique de acordo com o ID que você informou na função

<div class=”AccordionPanelContent” id=”tb2″>Content 2</div>

O painel deve ficar assim. Em negrito está as alterações que devem ser feitas. Esse é apenas um painel faça isso em quantos painéis você quiser.

<div class=”AccordionPanel”>
<div class=”AccordionPanelTab”onclick=”Spry.Utils.updateContent(‘tb2′,’painel_1.html’);“>Label 2</div>
<div class=”AccordionPanelContent” id=”tb2″>Content 2</div>
</div>

Customizando o Spry Accordion

Na janela de configuração de CSS (Shift + F11), estão disponiveis os estilos CSS do Spry Accordion que podem ser modificados, Muita atenção nas modificações desses estilos pois podem implicar no não funcionamento adequado do Accordion, recomendo que seja apenas modificado as cores, a largura do painel e a altura dele.

.AccordionPanelTab: Modifica as configurações da div do titulo

.AccordionPanelContent: modifica as configurações da div do conteúdo do painel, caso queira modifique a altura do painel (height)

.AccordionPanelOpen .AccordionPanelTab: modifica a cor de fundo do titulo do painel ao ser inicializado, ou sej aque ainda não foi clicado

.AccordionPanelTabHover: modificar a cor da fonte do titulo do painel que está fechado ao passar o mouse por cima

.AccordionPanelOpen .AccordionPanelTabHover: modificar a cor da fonte do titulo do painel que está aberto ao passar o mouse por cima

.AccordionFocused .AccordionPanelTab: modifica a cor de fundo da div com o titulo do painel inativo ou fechado

.AccordionFocused .AccordionPanelOpen .AccordionPanelTab: modifica a cor de fundo da div com o titulo do painel aberto ou ativo

Fonte: http://www.mxstudio.com.br/desenvolvimento/dreamweaver/paineis_sanfonados_com_ajax/

Deixe um comentário