Sección de Artículos

Plugin JQuery para realizar valoraciones


Plugin JQuery para realizar valoraciones


avatar
(Programación)
Escrito el 10-03-2016 a las 09:39

Valoraciones es un plugin de jQuery, que nos permite puntuar o valorar de forma gráfica por medio de iconos coloreados los contenidos o artículos de nuestra web.

Es completamente gratuita, redistribuible y reconfigurable por cualquier usuario bajo licencia MIT.

Básicamente consta de un conjunto de marcadores, sobre los que se interactua haciendo click sobre un icono o moviendo el ratón por encima de los iconos para calificar o puntuar.

Para los marcadores hace uso de las famosas font-Awesome que nos proporcionan iconos vectoriales. La herramienta ofrece una colección preestablecida de 15 iconos.

La puntuación asignada se basa en la parte proporcional de la estrella seleccionada con respecto a la cantidad de estrellas que se muestran sobre una puntuación máxima que establecemos a la hora de crear el plugin.

Archivos necesarios

  1. JQuery *
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  2. font-Awesome *
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
  3. El archivo valoraciones.min.js
    <script src="js/valoraciones.min.js"></script>

* Si decides almacenar los archivos en tu web los encontrarás en los directorios dist/jquery y dist/font-awesome.

Funcionamiento básico de la herramienta

Si ya tenemos incorporados los archivos necesarios en nuestra sección de cabecera, lo más sencillo consiste en seleccionar un contenedor para nuestros marcadores (mediante un selector de JQuery) e invocar la función .valoraciones() para que automáticamente se muestren el conjunto de marcadores con los que realizar nuestra valoración.

<div id="puntos"></div>
<script>
$(function() {$('#puntos').valoraciones();});
</script>

Este ejemplo nos creará un marcador con 5 estrellas para puntuar de 0 a 25, donde sólo tendremos que ir pulsando sobre las estrellas para ir dando más o menos puntuación. 1 estrella marcada -> 5 puntos, 2 estrellas marcadas -> 10, ... 5 estrellas marcadas -> 25 puntos.

Para modificar las características del marcador, podemos invocar a la función pasándole un conjunto de propiedades con sus valores.

En este ejemplo crearemos un marcador de 8 iconos de tipo 'pila/bateria' que puntúe de 0 a 90 y que en lugar de utilizar el evento click del ratón utilice el evento hover (deslizarse sobre las estrellas).

<div id="puntos"></div>
<script>
$(function() {$('#puntos').valoraciones({star_tot:8, star_max:90, evento:'hover', star_ico: 7});});
</script>

En este caso 1 estrella marcada -> 11 puntos, 2 estrellas marcadas -> 22, 4 estrellas marcadas -> 45 puntos, ... 8 estrellas marcadas -> 90.

La configuración de la herramienta se puede realizar también asignando las propiedades colocándolas como atributos del div contenedor.

Veamos el mismo ejemplo anterior, pero inicializando la herramienta por medio de su contenedor.

<div id="puntos" star_tot:8 star_max:90 star_ico=7 evento:'click'></div>
<script>
$(function() {$('#puntos').valoraciones();});
</script>

Crear múltiples marcadores

Creamos un conjunto de 4 marcadores de 5 estrellas, utilizando el evento hover del ratón, que representen una puntuación máxima de 100 y con un tamaño de marcador grande.

<div class="puntuaciones"></div>
<div class="puntuaciones"></div>
<div class="puntuaciones"></div>
<div class="puntuaciones"></div>

<script>
$(function() {$('div.puntuaciones').valoraciones({evento:'hover', star_max:100, star_size:1});});
</script>

Obtener el valor de la puntuación

Para recuperar el valor representado por la valoración, se puede realizar en cualquier momento consultando el método .valor() ó de una forma más eficiente por medio de una función de retorno definida por el usuario, que se le pasará a la función .valoraciones() por medio de la propiedad 'callback' en el momento de crear la herramienta. A esta función se le pasarán los valores actuales de las propiedades de la herramienta cada vez que el usuario realice un cambio en los marcadores.

Veamos un ejemplo:

<div id="puntos"></div>
<p>Puntuación: <span></span></p>
<script>
var puntuaciones = function(datos) {
$parrafo=datos.selector.next('p');
$parrafo.children('span').text(datos.valor);
};
$(function() {$('#puntos').valoraciones({star_tot:8, star_max:90, evento:'hover', callback:puntuaciones});});
</script>

Asignar 0 puntos

Para asignar 0 puntos en una valoración tendremos que ejecutar un doble click sobre el primer marcador de estrella.


Ver demostración Plugin ValoracionesDescargar Valoraciones 1.2