Painéis Sanfonados com Ajax

Coluna Dreamweaver – Painéis Sanfonados com Ajax

Introdução

Salve Pessoal! Vou lançar mais uma serie de tutoriais sobre o Spry, mais dessa vez um pouco mais difícil ja que estarei fazendo combinações entre as muitas funções do Spry, e ainda como utilizar o Spry de forma não obstrutiva, nesse utilizarei os Spry Accordion é o Spry.Utils.updateContent.

Conceitos

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

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

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

Ver arquivos utilizados para constuir esse sistemas:
index.php

Considerações Finais

Qualquer comentário que vocês deixarem será bem vindo. Deixem seus pedidos de tutorias para as próximas colunas clicando aqui
Autor: Marcelo Souza Ramos – Colunista Dreamweaver do Portal MXSTUDIO
Visite meu blog www.marceloramos.blog.br e qualquer dúvida envie um e-mail para marcelo@marceoramos.blog.br ou acesse o nosso fórum

7 Comments to “Painéis Sanfonados com Ajax”

You can follow all the replies to this entry through the comments feed.

Nathalie

Setembro 13, 2008 at 11:18 am | Permalink

Gostaria de saber se alguem pode me dizer como se faz para deixar a altura de determinadas divs de conteúdo umas diferentes das outras.
Obrigada
Nathalie

Setembro 13, 2008 at 11:28 am | Permalink

AH, já descobri..
é só incluir uma nova classe no arquivo SpryAccordion.ccs definindo uma altura para a div e no código do arquivo html (na div de conteudo) usar a classe incluida no ccs.
Deivi

Setembro 15, 2008 at 8:01 pm | Permalink

gostasria de detalhesd de como fazer para desbloquear o controle de ActiveX
obr
João F. Melo

Novembro 10, 2008 at 3:20 pm | Permalink

O spry eh muito bom mesmo, basta vc saber o q quer e entender “um pouco” o codigo e fazer do seu jeito.
Muito bom!
Tales E Martins

Dezembro 3, 2008 at 1:36 pm | Permalink

Olá pessoal, gostaria de saber como faço para instalar o spry, não consigo achar esta ferramenta estou usando o dreamweaver 6.1, valeu….
thallys.em

Janeiro 13, 2009 at 11:56 am | Permalink

Alguém sabe como carregar páginas dentro do panel do spy ou seja quando clicar no titulo ele abre um página dentro dele
diasf2003

Julho 12, 2009 at 8:19 pm | Permalink

LINKS QUEBRADOS….

…obstrutivo com a utilização do SpryDOMUtils.js…..Veja um exemplo de Painéis Sanfonados utilizando o Spry Accordion…..