Exibindo Hints com AJAX
É comum ver em aplicações Desktop, elementos que possuem um Hint(Dica), o qual mostra uma breve descrição sobre o elemmento.Vremos como criar Hints para os elementos de nossas páginas, carregando o c...
Publicado em: 11 de outubro de 2007 | Leituras: 8.611 |
Canal: JavaScript |
Autor: Ramon Ferreira Silva
Geralmente em aplicções do tipo Desktop, alguns elementos possum um HINT(dica), ou seja, quando passamos o mouse sobre
o elemento é então exibido um caixa de dialogo contendo uma pequena descrição sobre esse elemento.
Em HTML nós temos o atributo ALT, porém esse atributo possui algumas limitações, tais como:
* não pode ter seu estilo personlaizado;
* o texto é estático;
* este atributo pode ser utilizado apenas em imagens;
Para resolver este problema, muitos desevolvedores utlizam divs escondidas na página, que somente são exibidas quando
o usário passa mouse sobre um elemento, e desaparecem quando o mouse for retirado do elemento.
É um boa solução, mas nesse caso você terá que possuir um div oculta para cada mensagem diferente que você queira mostrar ao usuário.
Com a utilizção do AJAX nós poderemos fazer esse mesmo efeito, só que com o texto sendo carregado dinanmicamente antes da div ser
exibida ao usuário.Para isto basta criar apenas uma div, e carregar o seu conteudo através de um requisição, isto nos dá a liberdade
de carregar qualquer coisa que for necessária, como texto, tabelas, imagens, formulários, etc...
Bem vamos ao código, ele não é muito complicado, mas é preciso tomar um cuidado quanto a compatibilide entre navegadores.
Primeiro nosso HTML
É bem simples mesmo, contém apenas três imagens(poderia ser qualquer outro elemento HTML o qual possua a propriedade onmouseover),
e uma DIV que será oculta.
Agora o CSS:
Contém apenas uma classe, para fazer a formatção da DIV, além de oculta-lá do usuário com display:none;
e por fim o nosso script:
Esse script contém duas funções e um pouco de código "solto", vamos a elas:
primeiramente, nós criaremos o objeto de requisição, verificando qual é o objeto o qual melhor se adapta ao navegador.
Depois temos as funções show_hint(e,sistema),hide_hint(), que respectivamente mostra a mensagem ao usuário e a oculta
quando for necessário.
Vamos a primeria função,
ela possui dois parâmetros o primeiro "e" é o objeto event(evento) do javascript, é utilizado para recuperar a posição do mouse
no momento em que o evento é disparado.O parâmetro "sistema" é um parâmetro qualquer, uma string no nosso caso, e serve para
passá-lo ao servidor e recuperar a mensagem correta, ou seja, é um identificador do elemento que disparou o evento.
Agora nós iremos recuperar a posição do mouse, para determinar onde será posta a div:
Mais uma vez, nós temos que ter o cuidade de verificar a compatibilidade entre objetos de diferentes navegadores.
E por fim nós realizaremos a requisição AJAX.
Quando a requisição estiver pronta nós só precisaremos colocar o seu conteúdo dentro da div exibi-lá
Para ocultar a div não é necessário muito trabalho, precaremos apenas alterar o seu atributo display
Simples, não? Por fim, nosso script de servidor, que irá processar a requisição
E isso e tudo.
Até a próxima.
o elemento é então exibido um caixa de dialogo contendo uma pequena descrição sobre esse elemento.
Em HTML nós temos o atributo ALT, porém esse atributo possui algumas limitações, tais como:
* não pode ter seu estilo personlaizado;
* o texto é estático;
* este atributo pode ser utilizado apenas em imagens;
Para resolver este problema, muitos desevolvedores utlizam divs escondidas na página, que somente são exibidas quando
o usário passa mouse sobre um elemento, e desaparecem quando o mouse for retirado do elemento.
É um boa solução, mas nesse caso você terá que possuir um div oculta para cada mensagem diferente que você queira mostrar ao usuário.
Com a utilizção do AJAX nós poderemos fazer esse mesmo efeito, só que com o texto sendo carregado dinanmicamente antes da div ser
exibida ao usuário.Para isto basta criar apenas uma div, e carregar o seu conteudo através de um requisição, isto nos dá a liberdade
de carregar qualquer coisa que for necessária, como texto, tabelas, imagens, formulários, etc...
Bem vamos ao código, ele não é muito complicado, mas é preciso tomar um cuidado quanto a compatibilide entre navegadores.
Primeiro nosso HTML
<html>
</head>
<body>
<img src="debian.gif" onmouseover="show_hint(event,'debian');" onmouseout="hide_hint();" />
<br />
<img src="ubuntu.jpg" onmouseover="show_hint(event,'ubuntu');" onmouseout="hide_hint();" />
<br />
<img src="kurumin.png" onmouseover="show_hint(event,'kurumin');" onmouseout="hide_hint();"/>
<div id="img_hint" class="hint_layer"></div>
</body>
</html>
É bem simples mesmo, contém apenas três imagens(poderia ser qualquer outro elemento HTML o qual possua a propriedade onmouseover),
e uma DIV que será oculta.
Agora o CSS:
<style type="text/css">
.hint_layer
{
display:none;
width:250px;
border:2px dashed;
position:absolute;
background:#ffffff;
text-align:left;
padding:10px;
}
</style>Contém apenas uma classe, para fazer a formatção da DIV, além de oculta-lá do usuário com display:none;
e por fim o nosso script:
<script language="javascript" type="text/javascript">
var req = null;
try
{
req = new XMLHttpRequest();
}
catch(trymicrosoft)
{
try
{
req = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(othermicrosoft)
{
try
{
req = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(failed)
{
req = null;
}
}
}
function show_hint(e,sistema)
{
var hint = document.getElementById("img_hint");
var url = "hint.php?sistema=" sistema "&time=" new Date();
var posx = 0;
var posy = 0;
if (!e) var e = window.event;
if (e.pageX || e.pageY)
{
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY)
{
posx = e.clientX document.body.scrollLeft
document.documentElement.scrollLeft;
posy = e.clientY document.body.scrollTop
document.documentElement.scrollTop;
}
req.open("GET",url,true);
req.onreadystatechange = function()
{
if(req.readyState == 4)
{
if(req.status == 200)
{
hint.innerHTML = req.responseText;;
hint.style.top = posy "px";
hint.style.left = posx 30 "px";
hint.style.display = 'block';
}
}
};
req.send(null);
}
function hide_hint()
{
var hint = document.getElementById("img_hint");
hint.style.display = 'none';
}
</script>Esse script contém duas funções e um pouco de código "solto", vamos a elas:
primeiramente, nós criaremos o objeto de requisição, verificando qual é o objeto o qual melhor se adapta ao navegador.
Depois temos as funções show_hint(e,sistema),hide_hint(), que respectivamente mostra a mensagem ao usuário e a oculta
quando for necessário.
Vamos a primeria função,
ela possui dois parâmetros o primeiro "e" é o objeto event(evento) do javascript, é utilizado para recuperar a posição do mouse
no momento em que o evento é disparado.O parâmetro "sistema" é um parâmetro qualquer, uma string no nosso caso, e serve para
passá-lo ao servidor e recuperar a mensagem correta, ou seja, é um identificador do elemento que disparou o evento.
Agora nós iremos recuperar a posição do mouse, para determinar onde será posta a div:
var posx = 0; //posicionamento horizontal
var posy = 0; //posicionamento vertical
if (!e) var e = window.event;
if (e.pageX || e.pageY)
{
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY)
{
posx = e.clientX document.body.scrollLeft
document.documentElement.scrollLeft;
posy = e.clientY document.body.scrollTop
document.documentElement.scrollTop;
}Mais uma vez, nós temos que ter o cuidade de verificar a compatibilidade entre objetos de diferentes navegadores.
E por fim nós realizaremos a requisição AJAX.
Quando a requisição estiver pronta nós só precisaremos colocar o seu conteúdo dentro da div exibi-lá
hint.innerHTML = req.responseText;;
hint.style.top = posy "px";
hint.style.left = posx 30 "px";
hint.style.display = 'block';Para ocultar a div não é necessário muito trabalho, precaremos apenas alterar o seu atributo display
var hint = document.getElementById("img_hint");
hint.style.display = 'none';Simples, não? Por fim, nosso script de servidor, que irá processar a requisição
<?php
header("Content-Type: text/html; charset=ISO-8859-1",true);
$id = $_GET['sistema" rel="nofollow" target="_blank">;
if($id == 'debian')
{
echo "<img src='debian.gif' />";
echo "O Debian é um sistema operacional (SO) livre para seu computador. Um sistema operacional é um conjunto de programas básicos e utilitários que fazem seu computador funcionar. O Debian usa o kernel (núcleo de um sistema operacional), Linux, mas a maior parte das ferramentas do SO vem do projeto GNU; daí o nome GNU/Linux.";
}
if($id == 'ubuntu')
{
echo "<img src='ubuntu.jpg' />";
echo "Ubuntu é um sistema operacional baseado em Linux desenvolvido pela comunidade e é perfeito para notebooks, desktops e servidores. Ele contém todos os aplicativos que voce precisa - um navegador web, programas de apresentaçao, ediçao de texto, planilha eletrônica, comunicador instantâneo e muito mais.";
}
if($id == 'kurumin')
{
echo "<img src='kurumin.png' />";
echo "O Kurumin é a distribuiçao Linux desenvolvida pela equipe do Guia do Hardware e colaboradores, que se tornou rapidamente uma das distribuiçoes Linux mais usadas no país. Todos os componentes do sistema sao abertos, permitindo que além de usar, voce possa redistribuí-lo, ver e modificar os scripts de configuraçao e desenvolver versoes modificadas do sistema.";
}
?>E isso e tudo.
Até a próxima.
Resposta em até 24 horas! (grátis)Dúvidas?
Autor da matéria
Últimas matérias escritas pelo autor:
|
Ramon Ferreira Silva Formado em Sistemas de Informação, atualemnte trabalha como Arquiteto de Software em uma empresa de telefonia móvel. |
Últimas matérias escritas pelo autor:
29/10 - Criando Storeds Procedures no MySql – ...
26/10 - Criando Stored Procedures no MySQL
30/10 - Resolvendo o problema do Cache
11/10 - Exibindo Hints com AJAX
29/06 - Preenchendo uma ComboBox Ajax e Json
20/06 - Caminhando pelo DOM - Parte IV
20/06 - Caminhando pelo DOM - Parte III
14/06 - Caminhando pelo DOM - Parte II
11/06 - Caminhando pelo DOM - Parte I
25/05 - Trabalhando com JSON
09/04 - Acentuação para conteúdos carregados p...
26/10 - Criando Stored Procedures no MySQL
30/10 - Resolvendo o problema do Cache
11/10 - Exibindo Hints com AJAX
29/06 - Preenchendo uma ComboBox Ajax e Json
20/06 - Caminhando pelo DOM - Parte IV
20/06 - Caminhando pelo DOM - Parte III
14/06 - Caminhando pelo DOM - Parte II
11/06 - Caminhando pelo DOM - Parte I
25/05 - Trabalhando com JSON
09/04 - Acentuação para conteúdos carregados p...
Últimas matérias
O que você procura para sua vida profissional?
O planejamento agrega valor
E-mail marketing em 140 caracteres
Últimas notícias
Novos iPods, novo iOS, novo iTunes e nova Apple TV
Conheça as 100 primeiras cidades atendidas pelo Banda Larga ...
Linus Torvalds diz que mercado já se rendeu ao LinuxDicas do canal
- jQuery Lazy Load: Carregamento de imagen...
O plugin Lazy Load é um plugin feito em javascript... - Indicador de qualidade de senha
Quando um usuário se registra em alguma aplicação ...
