08
may
Star Rating con jQuery
Star Rating es un plugin de jQuery para votar/puntuar cosas.
Aquí tienes unos ejemplos.
Se implementación es relativamente fácil, añadimos las librerías javascript en el head:
<script language="javascript" type="text/javascript" src="jquery-1.3.2.min.js"></script> <script language="javascript" type="text/javascript" src="jquery-ui-1.7.1.min.js"></script> <script language="javascript" type="text/javascript" src="ui.stars.min.js"></script>
Ahora, la hoja de estilos:
<link rel="stylesheet" type="text/css" href="ui.stars.css" />
Configuración del script:
<script type="text/javascript">
$(function(){
$("#ratings").children().not(":radio").hide(); //Escondemos todo el contenido exceptuando los radios.
$("#ratings").stars({
oneVoteOnly: true, //Este parámetro sirve para que una vez pulsada alguna estrella haga el submit.
split: 2, //Dividimos las estrellas en medios
callback: function(ui, type, value)
{
$.post("ratings.php", {rate: value}, function(data) //Fichero donde procesamos las votaciones.
{
$("#ajax_response").html(data); //Capa donde cargamos el contenido en Ajax.
});
}
});
});
</script>
El contenido html:
<form id="ratings" action="ratings1.php" method="post">
<input type="radio" name="rate" value="0.5" id="rate1" />
<input type="radio" name="rate" value="1" id="rate2" />
<input type="radio" name="rate" value="1.5" id="rate3" />
<input type="radio" name="rate" value="2" id="rate4" />
<input type="radio" name="rate" value="2.5" id="rate5" />
<input type="radio" name="rate" value="3" id="rate1" />
<input type="radio" name="rate" value="3.5" id="rate2" />
<input type="radio" name="rate" value="4" id="rate3" />
<input type="radio" name="rate" value="4.5" id="rate4" />
<input type="radio" name="rate" value="5" id="rate5" />
<input type="submit" value="Enviar" />
</form>
<br style="clear:both" />
<p id="ajax_response"></p>
Ningún comentario
Aún no hay comentarios.
Tienes que estar conectado para publicar un comentario.