Você está usando um navegador desatualizado. Para a visualização correta, atualize seu navegador:

Mapa do site


SimpleUi

Atualizando

Código para Sanfona Download

? - +
Conteúdo safonado estilo slide-show e slide-hide
  1. Coloque a class ui_accordion no elemento que será o gatilho da sanfona
    • Esse elemento pode ser qualquer marcação Html
Pronto! Isso é suficiente. Caso queira, você pode customizar a função:
  1. Por padrão, o conteúdo que será aberto está após o gatilho
    • Para alterar esse padrão, insira o atributo data-obj no gatilho
    • Use valores notáveis, como prev para anterior e next para próximo (padrão), ex: data-obj="prev"
    • Ou preencha com qualquer seletor que identifique o seu objeto, ex: data-obj=".minhaClasse" ou data-obj="#meuID"
  2. A velocidade de abertura padrão da sanfona é lenta
    • Para alterar esse padrão, insira o atributo data-speed no gatilho
    • Use valores notáveis, como fast para rápido, normal ou slow para lento (padrão), ex: data-speed="fast"
    • Ou preencha com qualquer valor em ms, ex: data-speed="500"
  3. Use o atributo data-label no gatilho para alterar o texto quando ele estiver ativo, ex: data-label="fechar"
  4. Use o atributo data-clickoutside="true" no gatilho para recolher a sanfona a partir de cliques em qualquer área da tela
  5. Use o atributo data-anchor="true" no gatilho para ancorar a página até ele quando clicado
  1. Após a animação da sanfona, usuários avançados podem implementar uma função do tipo callback
    • Para isso, crie a função callback_accordion(trigger,obj) e implemente as ações que irão ocorrer após a animação
    • trigger é o objeto que gera o efeito (gatilho) e obj é o objeto que sofre o efeito. Como exemplo, a função pode testar se gatilho está ativo, if(trigger.hasClass("active")){}, ou se a sanfona está visível, if(obj.is(":visible")){}.
    • Essa função não é obrigatória, ou seja, só será executada se existir. Caso positivo, para evitar duplicidades, lembre-se de implementar a função callback em arquivos específicos, presentes nas respectivas páginas finais, já que o seu objetivo não é genérico.
  2. Também é possível usar a função accordion de modo isolado para abrir em eventos ou ações diversas
    • Para isso, use a função accordion(obj,speed,force)
    • Onde obj é objeto que será sanfonado, exemplo $("#meuId") ou $(".minhaClass") (tambem pode ser elemento, como "#meuId" ou ".minhaClass").
    • speed (parâmetro opcional) é a velocidade da animação. Use número em ms ou valores notáveis, como "slow", "normal" (padrão) e "fast".
    • force (parâmetro opcional) é comportamento da animação (open ou close). Se estiver vazio, o comportamento será variado, ora abre, ora fecha.
    • A vantagem de usar a função isolada (ao invés de escrever outra função) é o vínculo com a Ui, como as chamadas callbefore e callback
Customizar


Comportamento inicial

. Padrão: invisível (false)

Objeto

O efeito acontecerá no elemento . Padrâo: posterior (next)
...de e rótulo

Dessa forma, a sanfona pode ficar em qualquer lugar do Html.

Velocidade

A abertura da sanfona será . Padrâo: normal
ms. Lenta: 600ms Normal: 400ms Rápido: 200ms.

Rótulo

O texto do gatilho será quando ele estiver ativo.

Tipo

A marcação do gatilho será . Saiba mais
Qualquer marcação (tag) pode ser usada como gatilho, como:
  • links (<a>)
  • botão (<button>)
  • parágrafos (<p>)
  • containers (<div>)
  • inputs (<input type="button">, <input type="submit">, etc.)
  • Dentre outros.

Área de retração

. Saiba mais
Para testar o efeito, habilite a função, abra a sanfona e, em seguida, clique em qualquer parte da tela.
Tem certeza que deseja reiniciar todos os valores?

Resultado para Sanfona