Calificar mi sitio web con jQuery star-rating, sistema de estrellas.





Calificar mi sitio web con jQuery star-rating, sistema de estrellas, este plugin nos nos facilita mucho la conversión de elementos select(html) a estrellas de votación, aunque no hay mucho que decir sobre este sistema de rating podemos ver el uso en algunas plataformas que exponen películas (muy común en plataformas como netflix), sin duda la implementación se puede realizar donde tu gustes crearlo.

Puedes ver una demostración en el siguiente enlace: http://www.jqueryscript.net/demo/Dynamic-Select-Based-Rating-Plugin-For-jQuery-star-rating-js/
1.- Creando las referencias.

<link href="css/star-rating.css" rel="stylesheet">
<script src="js/star-rating.min.js"></script>

2.- Creando los elementos html a convertir (select)


<select id="star-rating">
<option value="">Select a rating</option>
<option value="5">Excellent</option>
<option value="4">Very Good</option>
<option value="3">Average</option>
<option value="2">Poor</option>
<option value="1">Terrible</option>
</select>

3.- Convirtiendo los elementos html a estrellas.


<script>
// Using vanilla javascript:
var starrating = new StarRating( document.getElementById( 'star-rating' ));
// OR - Using jQuery:
$( '#star-rating' ).starrating();
</script>

4.- Aplicando opciones de visualización


$( '#star-rating' ).starrating({
clearable : true,
initialText: "Click to Rate",
onClick : null,
showText : true,
});

Este plugin se usaría para iniciar un sistema completo de calificaciones, pues realmente faltaría guardar la calificación de cada usuario, sacar promedio y mostrar el promedio, además de eso validar que un usuario solo pueda votar una vez, lo que posiblemente incluya cookies, base de datos, promedio de calificaciones, un buen diseño e implementación repetitiva, como sugerencia puedes implementar este plugin a una clase para ahorrarte mucho trabajo.


Alternativa 2 – starrr

1.- Para esta otra opción


<link href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script src="starrr.min.js"></script>

2.- Crear elementos a convertir y agregar pequeños estilos


<style>

.starrr { display: inline-block; }

.starrr i {
font-size: 16px;
padding: 0 1px;
cursor: pointer;
color: #ffd119;
}

</style>

<div class='starrr'></div>

<script>
$('.starrr').starrr();
</script>

 

You may also like...