Autor: Felipe Alencar
Spry collapsible painel è assim que o Dreamweaver CS3 denomina o efeito.
Com certeza você já deve ter visto esse efeito e se ainda não conseguiu reproduzi-lo agora chegou a hora.
É bem fácil de se usar e customizar!
Versão: Dreamweaver CS3 e 8
Dificuldade: Médio. Conhecimentos em HTML, CSS e lógica Js.
Como se trata de um recurso nativo do Dreamweaver 8 e CS3, resolvi colocá-lo na categoria do Dreamweaver, porem esse tutorial trabalha com Divs HTML, CSS, e Javascript.
Na verdade é bem fácil, porem se você não conhecer as ferramentas acima terá dificuldades em customizar.
Veja funcionando:
“There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain….”
Vamos ao que interessa.
Abra seu Dreamweaver CS3, crie um novo arquivo e salve com um nome de sua preferência.
O nosso se chama: “index.htm”
Com o “index.htm” aberto escolha a visualização Code ou Código e clique na guia “spry”
Depois clique na opção “Spry collapsible painel” e tenha certeza de que o código foi inserido dentro da tag <body>
Note que no momento em que você clicou na opção “Spry collapsible painel” foi criada uma pasta chamada “SpryAssets” ela contem os arquivos:
SpryCollapsiblePanel.css
SpryCollapsiblePanel.js
No final do código da sua “index.htm” foi inserido um código que faz a referência ao seu spry.
<script type="text/javascript"> <!-- var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1"); //--> </script>
Pronto, seu script já esta funcionando. Aperte f12 no seu Dreamweaver e teste no seu browser.
Algumas customizações rápidas no documento javascript “SpryCollapsiblePanel.js”
Na linha 341 você pode ajustar a velocidade de abertura do seu efeito. O valor é em milisegundos, quanto menor é mais rápido.
Na linha 55 você pode definir que a sua <div> começa fechada por exemplo.
Basta inserir o valor “false” como da imagem acima. O padrão é “true”.
No arquivo CSS “spryCollapsiblePanel.css” você configura o estilo e detalhes visuais do seu spry.
Não vou citar pois aqui fica a vontade e a criatividade de cada um ok. O código é bem simples.
Baixe os arquivos funcionando aqui.
Galera, o Download esta dando pau no Firefox2, se alguem souber como contornar, poste por favor!
Abs, e até a próxima!
Felipe Alencar
next4.com.br
Equipe Alvo Web
O Conteúdo do Alvo Web Developers está licenciada sob uma Creative Commons Atribuição-Uso Não-Comercial-Compartilhamento pela mesma Licença 2.5 Brasil License.
3 respostas ↓
1 Caio Sposito // Fev 6, 2008 at 4:06 pm
Olá Felipe,
também estou fazendo alguns testes com o Spry e seu artigo ajudou, legal.
Só estou tendo uma dificuldade de inserir mais de um ‘SpryCollapsiblePanel’ na mesma página, não sei porque só o primeiro funciona. Sabe o que pode estar ocorrendo? Já teve algum problema similar?
Obrigado.
2 Felipe // Fev 7, 2008 at 8:11 am
Fala Caio,
seguinte cara:
verifica as últimas linhas da sua página, você irá encontrar um javascript.
basta você adicionar uma nova linha.
ex:
Spry.Widget.CollapsiblePanel("CollapsiblePanel1");
Spry.Widget.CollapsiblePanel("CollapsiblePanel2");
3 Julio // Abr 10, 2008 at 10:59 am
Show de bola essa funcionalidade do Dream Weaver CS3 !!!
Porém estou tendo um problema, o mesmo não funciona dentro de outro DIV, tenho um que site está estruturado em DIV, e quando insiro alguma função SPRY dentro desta DIV ela não funciona, você sabe o que pode sestar ocorrendo?
Valeu !
Abraço !
Faça um comentário