Login:

iMasters | Por uma internet mais criativa e dinâmica

Feeds

Segunda-feira, 19/11/2007 - 09:00 - Por Leandro Vieira
Seções relacionadas:

Como alterar o Spry Accordion para exibir o painel em questão aberto

Olá amigos, tudo bem com vocês? Espero que sim.

Este é meu primeiro artigo após o iMasters InterCon 2007. Fiquei muito contente de estar presente no evento, onde tive a oportunidade de conhecer novas pessoas, os novos integrantes da família iMasters, bater um papo descontraído com leitores da coluna, do meu blog e daqueles que já adquiriram alguns dos meus cursos, além de realizar um networking para trabalhos futuros. Foi ótimo estar em contato com vocês.

Hoje, falaremos sobre o Spry Accordion, um dos novos recursos da versão CS3 do Dreamweaver.

O Spry Accordion é um grupo de painéis "dobráveis", onde cada um deles é visível e aberto por vez. Este tipo de recurso é muito utilizado na exibição de extenso conteúdo em espaços compactos.

O escopo deste artigo refere-se a uma forma de hackear o código do Spry Accordion, afim de exibir em aberto o painel em questão. E não de como criar um Spry Accordion. Como, até o momento, não há uma opção do recurso que nos possibilite tal opção, resolvi adaptar o código.

Um detalhe, hackear um código nada mais é do que modificar ou inventar algumas funcionalidades que não foram pensadas, desenvolvidas ou implementadas pelo autor do código original. Somente.

No Curso Interativo Adobe Dreamweaver CS3 abordo tudo sobre o Spry, inclusive o Spry Accordion. Além de falar sobre uma dica de como definir que um painel padrão fique aberto ao carregar a página. Embora o Dreamweaver CS3 não ofereça tal opção através de sua interface.

Para que possamos alcançar o nosso objetivo, ou seja, exibir o painel em questão do Spry Accordion aberto, vamos realizar o seguinte processo: quando o usuário clicar sobre um determinado painel, será criado um cookie que irá gravar a identificação de tal painel. Dessa forma, saberemos qual o último painel aberto, e com essa informação, poderemos abri-lo ao carregar a página. Simples.

Em um post entitulado como Solução para trabalhar com cookies em JavaScript no meu blog, disponibilizo um código para trabalhar, de forma simples, com cookies via JavaScript. Portanto, iremos incluí-lo junto ao arquivo do Spry Accordion, isto é, SpryAccordion.js. Inclua o código antes da instanciação da variável Spry: var Spry;

Nota: o código será disponibilizado no final do artigo, para você observar com maiores detalhes tais modificações.

Uma vez incluindo o código, w3cookies, podemos criar o cookie que precisamos e saber qual o painel clicado pelo usuário.

Através da inicialização do Spry Accordion é definido uma opção denominada como defaultPanel com o valor zero. O que indica que o painel a ser aberto quando a página carregar será o primeiro, sempre. Vamos mudar esse comportamento, de forma a exibir sempre o último painel clicado. Observe a lógica:

	if ( SpryCurrentPanel = w3cookies.read('SpryCurrentPanel') ) {
		this.defaultPanel = SpryCurrentPanel;
	} else {
		this.defaultPanel = 0;
	}

Dentro de uma condição IF, definimos o valor da variável SpryCurrentPanel com o valor de um cookie, também chamado de SpryCurrentPanel. Se tal cookie já tiver sido criado, teremos algum valor nessa variável. O que nos informa qual painel deveremos deixar aberto. Caso contrário, abriremos o primeiro painel.

Agora, precisamos apenas criar o cookie SpryCurrentPanel quando o usuário abrir o painel desejado. Esse cookie será criado dentro de uma função do Spry Accordion chamada openPanel. Esse função é executada para abrir um painel desejado. Vamos acrescentar o seguinte código no final da função openPanel:

w3cookies.create('SpryCurrentPanel',this.getCurrentPanelIndex(),365);

Nota: Se o arquivo do SpryAccordion.js for a versão 1.6 adicione o código demonstrado acima antes do seguinte código: return panelB;

Ou seja, criamos um cookie chamado SpryCurrentPanel; com o valor do painel em questão, isto é, o painel que acabara de ser exibido; e definimos que o cookie terá uma vida de 365 dias. Observe que utilizamos a função getCurrentPanelIndex do próprio Spry Accordion que nos diz qual o painel em questão.

Pronto. Alcançamos o objetivo desejado: exibir o painel em questão aberto.

Baixe o arquivo SpryAccordion.js com as modificações discutidas neste artigo.

Espero que tenham gostado; um forte abraço a todos.

Todos os artigos de Leandro Vieira

3 comentários publicados

  • 1. Forma nativa

    Sexta-feira, 28/12/2007, por Alexandre Manuel

    Legal Leandro, ótimo artigo. Vale a pena destacar que se forem páginas separadas e queira abrir em determinada posição, pode-se alterar o script (nativo) [var Accordion1 = new Spry.Widget.Accordion("Menu",{defaultPanel: 0 });] para o painel desejado.
    Valew

    Responder comentário

  • 2. Upload de fotos, nome para o db e redimensionar a imagem com dreamweaver

    Segunda-feira, 14/01/2008, por Pedro Francisco

    Olá Leandro,
    Sou no vo aqui no iMasters mas já achei as suas matérias muito úteis. Gostaria de saber se é possível que haja um sistema em PHP feiot no Dreamweaver onde o usuário faça o upload de uma imagem para o servidor, seu nome vá para o db MySQL e a imagem seja redimensionada para um tamanha específico. Já vi que é possível realizar tudo isso menos o redimensionamento. Seria possível fazer isso? Se sim, poderia nos mostrar em uma de suas materias? Garanto que seria útil e interessante para todos o leitores da sua coluna.

    Desde já agradeço,

    Responder comentário

  • 3. Veja:

    Segunda-feira, 14/01/2008, por Leandro Vieira

    Olá Pedro,

    Veja: http://leandrovieira.com/archive/como-utilizar-a-classe-w3_image

    Abraço.s

    Responder comentário

Poste um comentário


Os textos publicados neste espaço são de responsabilidade única de seus autores (colunistas e leitores) e podem não expressar necessariamente a opinião do iMasters.

Sobre o autor

Leandro Vieira trabalha com desenvolvimento web desde 2002. Em 2005, foi convidado para integrar o time de referências profissionais do iMasters. No mesmo ano, lançou o CD-ROM Dreamweaver + PHP + MySQL recordista de vendas do TI SHOP. Em 2006, lançou o CD-ROM Curso Web Sites com AJAX, uma das primeiras referências de Ajax no Brasil. Em 2007 lançou o Curso Interativo Adobe Dreamweaver CS3 abordando as novas funcionalidades e recursos do Dreaweaver CS3. Atualmente, Leandro Vieira é desenvolvedor web, professor do iPED Premier, criador de cursos exclusivos para o TI SHOP, editor do blog leandrovieira.com e cursando Comunicação Social (Publicidade e Propaganda) na UNIVALE.


Indique para um amigo

captcha


2001 - iMasters FFPA Informática Ltda - Todos os direitos reservados.