Buenas noches!
El objetivo de esta entrada será explicar brevemente en qué consiste JQuery Raty y cómo usarlo.
JQuery Raty es un plugin para JQuery con el que se podrá implementar fácilmente la típica barra con estrellas utilizada para evaluar algo en una web.
Puede ser descargado de la siguiente página:
Para instalarlo bastará con incluir los siguientes archivos en nuestro proyecto:
- jquery.raty.min.js
- star-on.png
- star-off.png
El primero lo incluiremos en la carpeta 'js' y los otros dos en la carpeta 'img'.
Para utilizarlo en nuestro código deberemos añadir el siguiente código:
<script type="text/javascript">
$(function() {
$('#nombreElemento').raty({ [Atributos de Configuración });
});
</script>
<div id="nombreElemento" name="nombreElemento" value=""></div>
En cuanto al selector "nombreElemento", se refiere al valor de la propiedad "name" del elemento HTML al que se le aplica el objeto raty (en este caso, el 'div').
Hay que señalar que, dentro del bloque, podrán ser declarados cuantos raty se desee, especificando correctamente el nombre del elemento al que se le aplicará.
Si queremos configurar los diferentes parámetros deberemos especificarlos dentro del bloque de código del raty. En el siguiente enlace se pueden ver algunos de esos parámetros y como incluirlos en el código:
De entre todos los parámetros voy a resaltar el llamado 'click', que será el encargado de ejecutar una función cada vez que se ejecute un evento de click sobre el objeto Raty. Esta función podrá ser utilizada para almacenar el valor de un elemento (que podrá ser necesario para posteriores scripts PHP), tal y como se ve en el siguiente ejemplo:
<script type="text/javascript">
$(function() {
$('#servicio').raty({
click : function(score) {
$('#nombreElemento').val(score);
}
});
});
</script>
Este plugin permite realizar muchas más cosas pero, en principio, estas son las dificultades con las que me he encontrado a la hora de trabajar con él y de las que he encontrado muy poca información por la red.
Espero que pueda servirles de ayuda :)
Saludos!
