Este plugin serve para substituir o click do mouse por um hover.
Não é mais necessario clicar no link, basta passar o mouse pelo link que aparece um ícone e depois deixar o mouse em cima um tempinho. O navegador irá automaticamente para o link.
A ideia deste plugin veio do menu Lancelot do KDE, que é um menu "Iniciar" onde não é necessário clicar, tudo funciona somente movendo o mouse.
O funcionamento padrão é simples:
1 | $(".lancelot").lancelot(); |
Ao passar o mouse em qualquer link com a classe "lancelot" aparecerá uma imagem de link ao lado, ao manter o mouse sobre a imagem o navegador será redirecionado para o endereço do link.
A imagem que aparece pode ser trocada pelo css, o padrão é esse (com a imagem usada pelo wikipedia):
1 2 3 4 | .lancelotGo{ background:url("images/external-link-ltr-icon.png") no-repeat scroll left center transparent; padding:0 0 0 13px; } |
É claro que exitem mais opções!
1 2 3 4 5 6 7 8 9 | $('.lancelot').lancelot({ hoverTime: 3000, aclass: "lancelotGo2", atext: "hover here!", show: "true", display: "block", linkAction: "_blank", alink: "http://ttlocal.info" //passing url }); |
Acima foram alterados o tempo que o usuário deve deixar o mouse sobre o link(hoverTime), o estilo foi alterado mudando a classe(aclass), aparece um texto além da imagem(atext), o link para o hover aparece sempre(show), o link aparece como block e não inline(display), o link tentará abrir em uma nova janela(linkAction), e o endereço será o passado em (alink).
Que tal montar o endereço do link dinâmicamente?
1 2 3 4 5 6 7 8 9 | var googleSearch = function(){ //obj is a reference to each $('.lancelot2') var search = obj.text(); return "http://www.google.com/search?q="+search }; $('.lancelot2').lancelot({ speed: "fast", alink: googleSearch //passing function! }); |
Neste exemplo a animação para o link foi acelerada(speed) e estamos passando uma função para montar uma busca no google com o texto do link!
obj é um elemento interno do plugin que referencia cada elemento onde está sendo executado o plugin, internamente aconte o seguinte:
1 | obj = $(this); |
Esta função está sendo usada no site http://ttlocal.info,visite.
O desenvolvimento foi feito com ajuda do pivotal tracker, veja como foi em http://www.pivotaltracker.com/projects/104617
Para mais exemplos baixe o demo.
Download:
zip: http://github.com/codexico/jquery-plugin-lancelot-autolink/zipball/master
tar: http://github.com/codexico/jquery-plugin-lancelot-autolink/tarball/master
Veja, faça um fork, melhore, corrija, faça o que quiser com o código fonte no github:
http://github.com/codexico/jquery-plugin-lancelot-autolink
Bugs, sugestões? Escreva, eu gostaria de ouvir.
Ou inclua sua solicitação diretamente no pivotal
Quando a gente compete só a gente ganha, quando a gente colabora, todos ganham.