Nome:
Local: Rio de Janeiro, RJ, Brazil

Que perguntinha hein?! Mas vamos lá, adoro estudar assuntos relacionados à web, sempre que posso aprendo uma tecnologia, técnica ou linguagem nova. Tento sempre ver quais são as tendências e acompanha-las, enfim eu sou um eterno aprendiz. Deixando o lado profissional, entrando no lado pessoal, sou uma pessoa super gente-boa (pelo menos eu me acho. rs), adoro curtir a night, sair com os amigos, fazer novas amizades e viajar (tem coisa melhor do que isso?) Acho que você já está sabendo demais sobre mim. Fuiii...

domingo, 23 de novembro de 2008

Accordion use a vontade

Accordion é a onda do momento, utilizei alguns, mas os que utilizei não me davam liberdade para customização. Então resolvi fazer o meu accordion que atendessem as minhas necessidades.
Acredito que esteja bem simples de ser utilizado, então coloquei no ar, se alguém precisar já pode utilizar, portanto que deixe os créditos. Críticas e sugestões é só enviar
Para utilizar são necessários as seguintes etapas:

1: Linkar a lib jQuery e o código accordion.
2: Criar o html respeitando algumas seguintes regras.

  • Um elemento global com um id

  • Um elemento com a classe box

  • Dentro do box os seguintes elementos


    • um elemento com a classe header

    • um elemento com a classe content




3: Instanciar o accordion, para instanciá-lo, basta passar um json com as configurações desejadas.
var pars = {
id : 'accordion1',
time : 500,
index : 2,
openIt : function(that){
  //configuração da forma desejada
  $(that).find(".seta img").attr("src", "seta_amarela_cima.png");
},
closeOthers : function(that){
  //configuração da forma desejada
  $(that).find(".seta img").attr("src", "seta_amarela_baixo.png");
}
//id do elemento global (obrigatorio)
// tempo de execução da animação (obrigatorio)
// Se quiser configurar qual item do accordion começará expandido, é só enviar o número. Lembre-se, o indice começa de 0
// Quando elemento expandir, se quiser alguma configuração especial essa é a função, por parâmetro é passado o elemento box
// Quando os elementos fecham, se quiser alguma configuração especial essa é a função, por parâmetro é passado o elemento box

accordion(pars);

No json da passagem do parâmetro apenas dois itens são obrigatórios, o id do accordion e o tempo da animação todos os outros, são de acordo com a sua vontade.

Exemplo de uso:

<div id='accordion'>
  <div class='box'>
    <div class='header'>Titulo do box</div>
    <div class='content'>Conteudo da caixa do accordion</div>
  </div>
  <div class='box'>
    <div class='header'>Titulo do box 2</div>
    <div class='content'>Conteudo da caixa do accordion 2</div>
  </div>
</div>


accordion({id : 'accordion1', time : 500});

O link do código que disponlizei encontra-se aqui

Fuiii...

Marcadores: ,

0 Comentários:

Postar um comentário

Assinar Postar comentários [Atom]

<< Página inicial