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.
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...
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: codes, JavaScript
0 Comentários:
Postar um comentário
Assinar Postar comentários [Atom]
<< Página inicial