Artículo

---

12 ¡votar!

Crea un sistema de votaciones con jQuery Raty

jQuery Raty es un plugin creado para jQuery que nos permite crear un sistema de rating en nuestro sitio que sea fácil de utilizar y muy simple de implementar.

Este plugin se caracteriza por lo ligero que es, ya que ocupa unos 4 Kb en su versión comprimida.

Su funcionamiento es muy sencillo, ya que solo necesitamos crear un contenedor DIV con un id y hacer llamada al plugin.

El ejemplo más sencillo es cuando no tiene ninguna opción. Es el siguiente código.

$('#default').raty();
<div id="default"></div>

Si queremos que el sistema empiece ya con un valor determinado, se puede utilizar la opción “start”

$('#fixed').raty({
readOnly:  true,
start:     2
});
<div id="fixed"></div>

En el ejemplo anterior también hemos hecho uso de la propiedad “readOnly”, para indicar que el elemento es de solo lectura.

Cuando un elemento es de solo lectura, se puede poner un mensaje que indique información al respecto. Para ello se utiliza la propiedad “noRatedMsg”.

$('div#anyone').raty({
readOnly:   true,
noRatedMsg: 'anyone rated this product yet!'
});
<div id="anyone"></div>

También se puede una puntuación con nombre personalizado y también personalizar el número de estrellas que aparecen.

$('#number').raty({
scoreName:  'entity.score',
number:     10
});
<div id="number"></div>

También se pueden utilizar funciones dentro de la llamada, capturando el evento onClick. Os dejamos el código.

$('#click').raty({
onClick: function(score) {
alert('score: ' + score);
}
});
<div id="click"></div>

También se puede indicar que se muestren medias estrellas. Para ello utilizamos la propiedad “showHalf” a true.

$('#half').raty({
start:     3.3,
showHalf:  true
});
<div id="half"></div>

Otra opción que nos permite, es modificar el nombre que aparece por defecto en las estrellas. Esto se hace utilizando la siguiente propiedad.

hintList:     ['bad', 'poor', 'regular', 'good', 'gorgeous']

Como véis, es sencillo utilizar el plugin. Podéis ver sobre este plugin, mirando en su página oficial.

Publicado por: angel carrero

Recomendar a un amigo

Compartir en redes

Email  

Comentarios