ajaxboxrating.gif

Sistema de votação de estrelas estilo youtube, onde a pessoa passa o mouse sobre as estrelas e automaticamente as estrelas vão ser “marcadas” e após clicar na estrela o valor do voto é enviado por ajax para a página setada nos parametros.

Vamos trabalhar com 8 parametros, neste exemplo teremos todos os parametros suportados.

‘img-on’ :’http://www.ajaxbox.com.br/imagens/ico_estrela_cheia.gif’,
‘img-off’:'http://www.ajaxbox.com.br/imagens/ico_estrela_vazia.gif’,
‘voto-ini’:0,
‘voto-fim’:5,
‘url’:'http://www.ajaxbox.com.br/R/R.php’,
‘parametro’:'outro_paramentro=ajaxBox&numero_voto_selecionado’,
‘resposta’ :’Rating-Resposta’

img-on:
Recebe -> {String}
URL da imagem que será mostrada com “mouse-over”

img-off:
Recebe -> {String}
URL da imagem que será mostrada com “mouse-out”

voto-ini:
Recebe -> {Int}
Menor voto possivel +1. Isto é, valor sendo 0, o menor voto possivel será 1.

voto-fim:
Recebe -> {Int}
Maior voto porssivel.

url:
Recebe -> {String}
Url para onde a requisição será enviada

parametro:
Recebe -> {String}
Parametros que serão enviados por post na requisição ajax. O último parametro, sem sinal de igual será o parametro que enviará a quantidade de votos clicado

resposta:
Recebe -> {String}
Elemento que escreverá a resposta da requisição, na tela

div:
Recebe -> {String}
Elemento onde será montado as estrelas

Podemos também passar um parametro adicional ao carregar, que será o valor inicial ja marcado.

ajaxBox[’Start’]( 2 );

Neste caso passariamos que ao iniciar duas estrelas já estarão marcadas.

Montando código completo temos.

<script type=”text/javascript” src=”http://www.ajaxbox.com.br/js/prototype.js”></script>
<script type=”text/javascript” src=”http://www.ajaxbox.com.br/js/ajaxBox.js”></script>
<script type=”text/javascript” src=”http://www.ajaxbox.com.br/js/ajaxBox.Rating.js”></script>
<table>
<tr><td id=”Rating”></td></tr>
<tr><td id=”Rating-Resposta”></td></tr>
</table>
<script type=”text/javascript”>
ajaxBox.Rating( ‘Rating’,
{
‘img-on’ :’http://www.ajaxbox.com.br/imagens/ico_estrela_cheia.gif’,
‘img-off’:'http://www.ajaxbox.com.br/imagens/ico_estrela_vazia.gif’,

‘voto-ini’:0,
‘voto-fim’:5,

‘url’:'http://www.ajaxbox.com.br/R/R.php’,
‘parametro’:'outro_paramentro=ajaxBox&numero_voto_selecionado’,
‘resposta’ :’Rating-Resposta’
}
);
ajaxBox[’Start’]( 2 );
</script>

Exemplo

Para o funcionamento do ajaxBox[Rating] além do pacote ajaxBox você precisa do pacote ajaxBox[Rating]. Download