Plugin jQuery Accordions v1.1
Recentemente tive de implementar um sistema de menus accordion que trabalhassem de forma independente, e sem a necessidade de existir eventos inline (onblur, onclick, onchange) nos links da página HTML. Eis então que surgiu a oportunidade de poder trabalhar com jQuery.Graças aos magníficos selectores do jQuery, foi possível seleccionar as classes HTML e adicionar-lhes eventos, existindo assim interacção, dinamismo e funcionalidade. O objectivo principal foi ocultar conteúdo e mostrar apenas o essencial.
Nestes accordions em específico, eles começam com apenas o cabeçalho visível, no qual servirá de alavanca para abrir o conteúdo central e mostrar o rodapé. No conteúdo central, existe uma série de links e sublinks, mas só os 3 links pai é que estão visíveis inicialmente, os restantes terão de ser activados através do link que está no rodapé do menu. Ao clicar nos links pai, ficam visíveis os sublinks filhos.
Como considerei que estes menus accordion podiam ser interessantes para futuras aplicações, decidi criar um plugin muito simples que permite através de algumas parametrizações, seleccionar as classes que vão estar associadas a cada parte do módulo. Pode ainda ser definida a velocidade do efeito slide.
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery-accordions_v1.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".mod_links").jQueryAccordions( {
topclass: ".mod_links_top",
contentclass: ".mod_links_content",
footerclass: ".mod_links_footer",
parentclass: ".parent",
childrenclass: ".children",
showclass: ".show_link",
hideclass: ".hide_link",
speedfx: 400
});
});
</script>Estas são as linhas de código que necessitas para activar o plugin. Chama a livraria jQuery e o plugin, depois colocar no $(document).ready a instanciação do objecto jQueryAccordions, passando como selector a classe da div onde será aplicado o accordion.
*
topclass: é o cabeçalho do módulo
*
contentclass: é o conteúdo
*
footerclass: o footer
*
parentclass: link pai
*
childrenclass: link filho
*
showclass: o link +
*
showclass: o link -
*
speedfx: velocidade (ms)
Este é o modelo estruturar em HTML de cada menu accordion:
<!-- Módulo Links 1 -->
<div class="mod_links">
<div class="mod_links_top"><h2>Componentes</h2><img src="thumb1.jpg" width="181" height="73" title="Componentes" alt="Componentes"/></div>
<div class="mod_links_content">
<ul>
<li class="parent">
<a class="children" href="#" title="Componentes">Componentes</a>
<ul>
<li><a href="#" title="Calendário">Calendário</a></li>
<li><a href="#" title="Captura">Captura</a></li>
<li><a href="#" title="Carregamento">Carregamento</a></li>
<li><a href="#" title="Chat">Chat</a></li>
<li><a href="#" title="Código">Código</a></li>
<li><a href="#" title="Comentários">Comentários</a></li>
<li><a href="#" title="Demonstração">Demonstração</a></li>
<li><a href="#" title="Dicas">Dicas</a></li>
<li><a href="#" title="Flash">Flash</a></li>
<li><a href="#" title="Galeria">Galeria</a></li>
<li><a href="#" title="Gráficos">Gráficos</a></li>
<li><a href="#" title="Mapas">Mapas</a></li>
<li><a href="#" title="Menu">Menu</a></li>
<li><a href="#" title="Pop-up">Pop-up</a></li>
<li><a href="#" title="Questionários">Questionários</a></li>
<li><a href="#" title="Som">Som</a></li>
<li><a href="#" title="Vídeo">Vídeo</a></li>
</ul>
</li>
<li class="parent">
<a class="children" href="#" title="Design">Design</a>
<ul>
<li><a href="#" title="Avatares">Avatares</a></li>
<li><a href="#" title="Botões">Botões</a></li>
<li><a href="#" title="Brushes">Brushes</a></li>
<li><a href="#" title="Esquema de Cores">Esquema de Cores</a></li>
<li><a href="#" title="Fontes">Fontes</a></li>
<li><a href="#" title="Formulários">Formulários</a></li>
<li><a href="#" title="Ícones">Ícones</a></li>
<li><a href="#" title="Imagens">Imagens</a></li>
<li><a href="#" title="Inspiração">Inspiração</a></li>
<li><a href="#" title="Logótipos">Logótipos</a></li>
<li><a href="#" title="Padrões">Padrões</a></li>
<li><a href="#" title="Tabelas">Tabelas</a></li>
<li><a href="#" title="Templates">Templates</a></li>
<li><a href="#" title="Texturas">Texturas</a></li>
</ul>
</li>
<li class="parent">
<a class="children" href="#" title="Extras">Extras</a>
<ul>
<li><a href="#" title="3D">3D</a></li>
<li><a href="#" title="Alojamentos">Alojamentos</a></li>
<li><a href="#" title="Documentos Legais">Documentos Legais</a></li>
<li><a href="#" title="Estatísticas">Estatísticas</a></li>
<li><a href="#" title="Ferramentas">Ferramentas</a></li>
<li><a href="#" title="Informação">Informação</a></li>
<li><a href="#" title="Mozilla Firefox">Mozilla Firefox</a></li>
<li><a href="#" title="Plataforma">Plataforma</a></li>
<li><a href="#" title="Realidade Aumentada">Realidade Aumentada</a></li>
<li><a href="#" title="Segurança">Segurança</a></li>
<li><a href="#" title="Vídeo-Jogos">Vídeo-Jogos</a></li>
<li><a href="#" title="Webmail">Webmail</a></li>
</ul>
</li>
<li class="parent">
<a class="children" href="#" title="Frameworks">Frameworks</a>
<ul>
<li><a href="#" title="Anúncios de Emprego">Anúncios de Emprego</a></li>
<li><a href="#" title="Comércio Electrónico">Comércio Electrónico</a></li>
<li><a href="#" title="Fórum">Fórum</a></li>
<li><a href="#" title="Galeria de Fotografias">Galeria de Fotografias</a></li>
<li><a href="#" title="Partilha de Vídeos">Partilha de Vídeos</a></li>
<li><a href="#" title="Redes Sociais">Redes Sociais</a></li>
</ul>
</li>
<li class="parent">
<a class="children" href="#" title="Tutoriais">Tutoriais</a>
<ul>
<li><a href="#" title="Ajax">Ajax</a></li>
<li><a href="#" title="CSS">CSS</a></li>
<li><a href="#" title="Google">Google</a></li>
<li><a href="#" title="jQuery">jQuery</a></li>
<li><a href="#" title="Photoshop">Photoshop</a></li>
<li><a href="#" title="PHP">PHP</a></li>
<li><a href="#" title="RSS">RSS</a></li>
<li><a href="#" title="Twitter">Twitter</a></li>
<li><a href="#" title="Wordpress">Wordpress</a></li>
<li><a href="#" title="XHTML">XHTML</a></li>
<li><a href="#" title="XML">XML</a></li>
</ul>
</li>
<li class="parent">
<a class="children" href="#" title="Web Marketing">Web Marketing</a>
<ul>
<li><a href="#" title="Domínios">Domínios</a></li>
<li><a href="#" title="GetaFreelancer">GetaFreelancer</a></li>
<li><a href="#" title="Google Adsense">Google Adsense</a></li>
<li><a href="#" title="Google Analytics">Google Analytics</a></li>
<li><a href="#" title="Photoshop">Photoshop</a></li>
<li><a href="#" title="Google Orkut">Google Orkut</a></li>
<li><a href="#" title="Google Wave">Google Wave</a></li>
<li><a href="#" title="Newsletter">Newsletter</a></li>
<li><a href="#" title="Publicidade">Publicidade</a></li>
</ul>
</li>
</ul>
</div>
<div class="mod_links_footer">
<p class="hide_link"><span>-</span> Componentes</p>
<p class="show_link"><span>+</span> Componentes</p>
</div>
</div>
<!-- end mod_links -->
E aqui fica o CSS utilizado no exemplo:
/* Módulo de Links - Estrutura */
/***************************************************************************************************************************************** */
.mod_links{width:200px; margin:0 10px; text-align:left; float:left; }
.mod_links .mod_links_top{width:200px; margin:0 0 1px 0; padding-bottom:8px; float:left; }
.mod_links .mod_links_top h2{line-height:1.8em; padding:0 0 3px 10px; float:left; width:190px; cursor:pointer}
.mod_links .mod_links_top img{margin:3px 9px 0 9px; float:left; cursor:pointer; }
.mod_links .mod_links_content{width:200px; margin:0; padding:8px 0; float:left;}
.mod_links .mod_links_content ul{list-style-type:none; float:left}
.mod_links .mod_links_content ul li{line-height:20px; float:left; width:190px}
.mod_links .mod_links_content ul li a{padding:0 0 0 10px; display:block; margin:0 0 0 10px}
.mod_links .mod_links_content ul li a.children{width:160px;}
.mod_links .mod_links_content li.parent ul{position:relative; left:20px}
.mod_links .mod_links_content li.parent ul > li{width:175px;}
.mod_links .mod_links_footer{width:200px; margin:0; padding:0; height:25px; float:left; }
.mod_links .mod_links_footer p{float:right; margin:5px 0 0 0; padding:0; cursor:pointer; position:relative; right:10px}
.mod_links .hide_link, .mod_links .mod_links_footer, .mod_links .mod_links_content{display:none}
/* Módulo de Links - Design */
/***************************************************************************************************************************************** */
.mod_links{ -moz-box-shadow:0 0 10px #000000; background:#111111; border:2px solid #333333;}
.mod_links .mod_links_top{color:#fff; }
.mod_links .mod_links_top h2{font-size:1.08em; background:url(seta_cima.gif) 183px 11px no-repeat; color:#999; }
.mod_links .mod_links_top h2:hover{ text-shadow:0 0 4px #00CCFF; color:#fff}
.mod_links .mod_links_top img{border:1px solid #333}
.mod_links .mod_links_top.open{background:#1B1B1B; border-bottom:1px solid #333333; }
.mod_links .mod_links_top.open h2{background:url(seta_baixo.gif) 183px 11px no-repeat; text-shadow:0 0 4px #00CCFF; color:#fff}
.mod_links .mod_links_content ul li a{background:url(seta_dirt.gif) center left no-repeat; color:#CCCCCC; border:none}
.mod_links .mod_links_content li.parent ul li a{background:url(seta_dirt2.gif) center left no-repeat; color:#888888}
.mod_links .mod_links_content a.open{text-shadow:0 0 4px #00CCFF; color:#fff}
.mod_links .mod_links_content a:hover{}
.mod_links .mod_links_footer{background:#1B1B1B; border-top:1px solid #333333}
.mod_links .mod_links_footer p{font-size:0.83em; color:#666}
.mod_links .mod_links_footer p:hover{color:#888}
.mod_links .mod_links_footer span{font-size:0.9em;}
Conclusões: Muito provavelmente haverão novas versões deste plugin e por isso estou receptivo a sugestões para melhora-lo, tanto ao nível de optimização de código, como em funcionalidades.
Por fim, espero que consigas implementar este plugin nos teus projectos.
E qualquer dúvida ou comentário que queiras fazer, shooooooooooooot !
Demonstração:
Plugin jQuery Accordions v1.1Download:
jquery-accordions_v1.1.rarCompatibilidade: IE6+, Firefox, Chrome, Opera, Safari
Licença: Gratuito para uso não comercial