formulário e outros elementos de nossas páginas pode auxiliar os usuários a navegar no site, mantendo, ao mesmo tempo, um fl uxo constante para usuários mais experientes. Dicas de ferramentas podem ser instruções simples em um formulário para usuários que não sabem o que é um número CVV em um cartão de crédito, ou mais interativas, como na Figura 4-7, que mostra um exemplo de uma dica de ferramenta acionada pelo passar do mouse.
Figura 4-7: Uma dica de ferramenta acionada pelo passar do mouse no site da jQuery
A jQuery possui um evento hover (focalização) que utiliza os eventos mouseover e
mouseout nativos do JavaScript. Uma dica de ferramenta é somente um tipo de interação que pode ser utilizada com o evento hover, mas há muitas outras possibilidades que variam desde menus de navegação suspensos a visualizações de imagem como aquelas encontradas no site da Zappos, conforme mostra a Figura 4-8.
Figura 4-8: O site da Zappos exibe visualizações de imagens quando passamos o mouse sobre um produto
É fácil adicionar uma dica de ferramenta personalizada utilizando o evento hover na jQuery. Este exemplo se baseia em uma imagem com uma legenda que quero exibir diretamente abaixo da imagem quando o cursor do mouse passar sobre ela, como mostra a Figura 4-9. Podemos encontrar uma situação semelhante na qual não queremos que uma legenda seja exibida o tempo todo, mas somente quando o usuário passa o mouse sobre a fi gura.
1. Comece criando uma HTML para a imagem, a fi m de que ela tenha um atributo de título defi nido. Usamos o atributo do título para assegurar que os usuários sem JavaScript ainda possam ver a dica de ferramenta na imagem; este é um bom exemplo de uma melhoria progressiva. (Consulte o Capítulo 1 para ler sobre a melhoria progressiva.)
<h1>Hello jQuery.</h1> <div class="cart"> <h2>Shopping Cart</h2> </div> <div class="product"> <h3>Apple iPhone 4</h3>
<div class="product-image"><img src="images/iphone.jpg" title="Steve Jobs holds up the newest iPhone 4." alt="Steve Jobs"></div>
<p class="info">iPhone 4 is a GSM cell phone with a high-resolution display, FaceTime video calling, HD video recording, a 5-megapixel camera, and more.</p>
<p class="price">$299.99</p>
<div class="add-to-cart">Double-click to buy me</div> </div>
Figura 4-9: A dica de ferramenta após passar o mouse sobre a imagem e o resultado no Firebug quando o DOM é alterado
2. O próximo passo é adicionar o evento document.ready para assegurar que a jQuery será aplicada somente quando o DOM estiver pronto.
$(document).ready(function(){ });
3. Confi gure os eventos mouseenter e mouseleave para estarem vinculados ao elemento de imagem encontrado dentro do elemento product-image. Esse seletor é um seletor descendente porque estamos combinando um elemento descendente de outro elemento. Os elementos mouseenter e mouseleave garantem que, quando o usuário move o mouse, passando-o por cima e afastando-o das imagens, duas ações diferentes ocorram.
$(document).ready(function(){ $('.product-image img').bind({ mouseenter : function () { }, mouseleave: function () { } }); });
A diferença entre mouseover/mouseout e mouseenter/mouseleave é a maneira
Os eventos mouseover e mouseout são acionados quando o mouse é colocado no elemento, no elemento fi lho ou no descendente do elemento. Os eventos mouseenter
e mouseleaves são acionados apenas quando o mouse é colocado no elemento, independentemente se ele possui fi lhos. Os eventos mouseover e mouseout podem ser acionados involuntariamente e, portanto, causar problemas ao nosso script.
4. O estado mouseenter é o primeiro de dois estados e é acionado quando o mouse entra no elemento selecionado, que, neste caso, é a tag de imagem encontrada dentro do elemento product-image. Com esse evento, confi guramos uma variável chamada
tooltip, a qual armazena o valor extraído com o método attr da tag title.
$(document).ready(function(){ $('.product-image img').bind({ mouseenter : function () {
var toolTip = $(this).attr("title");
$('.info').after('<p class="toolTip">'+toolTip+'</p>'); }, mouseleave: function () { } }); });
5. A segunda declaração insere o valor da dica de ferramenta, que é armazenada na variável
tooltip no DOM, após a div, com as informações da classe. Após a dica de ferramenta ser inserida no DOM, ela é inserida em uma classe p com a classe toolTip.
$(document).ready(function(){ $('.product-image img').bind({ mouseenter : function () {
var toolTip = $(this).attr("title");
$('.info').after('<p class="toolTip">'+toolTip+'</p>'); }, mouseleave: function () { } }); });
6. Por fi m, o estado mouseleave é acionado quando o mouse é retirado do elemento selecionado. Este código oculta a dica de ferramenta que adicionamos anteriormente usando o método hide() anexado ao seletor p.tooltip:
$(document).ready(function(){ $('.product-image img').bind({ mouseenter : function () {
var toolTip = $(this).attr("title");
$('.info').after('<p class="toolTip">'+toolTip+'</p>'); }, mouseleave: function () { $('p.toolTip').hide(); } }); });
No exemplo anterior, confi gurei os eventos mouseenter e mouseleave usando um mapa dos pares tipo/manipulador de eventos. A vantagem de confi gurar eventos dessa forma é podermos adicionar mais eventos que gostaríamos de vincular a esse elemento dentro da mesma função.
Um objeto literal JavaScript, também conhecido como mapa, é um conjunto de pares nome/ valor. A sintaxe geralmente é defi nida como chaves de abertura e fechamento com os pares nome/valor entre aspas simples e separados por dois-pontos. Cada par nome/valor fi ca em sua própria linha, como mostra o exemplo a seguir:
{
'name1' : 'value1', 'name2' : 'value2', 'name3' : 'value3', }
Podemos utilizar mouseenter e mouseleave de outra forma e ainda assim obter o mesmo resultado. O evento hover vincula os eventos mouseenter e mouseleave em um único evento, proporcionando uma sintaxe concisa e fácil de usar, como ilustra o código a seguir:
$(document).ready(function(){ $('.product-image img').hover( function () {
var toolTip = $(this).attr("title");
$('.info').after('<p class="toolTip">'+toolTip+'</p>'); }, function () { $('p.toolTip').hide(); } }); });