JQuery | Cómo implementar el sistema Star-Rating usando RateYo

rateYo : – rateYo es un complemento de jQuery para crear un widget de calificación de estrellas que permite llenar el color de fondo de la parte no calificada de una estrella basada en SVG (gráficos vectoriales escalables) al pasar el mouse por encima. Es totalmente personalizable y escalable para adaptarse a cualquier necesidad de diseño.

Pasos para implementar el sistema Star-Rating usando RateYo:

Instalación:

1.  # NPM
     $npm install rateYo
2. #Bower
     $bower install rateYo

también puede usar la red de entrega de contenido (CDN) alojada por Google/Microsoft para incluir una versión de jQuery.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.css">
  
<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.js"></script>

Agregue la hoja de estilo requerida en la sección principal de la página html.

<link rel="stylesheet" type="text/css" href="jquery.rateyo.min.css">
Cree un div que sirva como contenedor de calificación de estrellas.

<div id="rateYo"></div>
Agregue la hoja de estilo requerida en la sección del cuerpo de la página html y vincule el archivo javaScript del complemento rateYo para realizar varias funciones.

<script type="text/javascript" src="jquery.min.js"></script>

<script type="text/javascript" src="jquery.rateyo.min.js"></script>

Llame a un complemento para representar una calificación de estrellas básica en el div de rateYo creado por usted.

$("#rateYo").rateYo();

Ejemplo

<!DOCTYPE html>
<html>
  
<head>
    <title>rating</title>
    <link rel="stylesheet" 
          type="text/css" 
          href="jquery.rateyo.min.css">
</head>
  
<body>
    <div style="width: 600px; margin: 30px auto">
        <div id="rateYo"></div>
    </div>
    <script type="text/javascript" 
            src="jquery.min.js"></script>
    <script type="text/javascript" 
            src="jquery.rateyo.min.js"></script>
    <script>
        $("#rateYo").rateYo({
            rating: 1.5,
            spacing: "10px",
            numStars: 5,
            minValue: 0,
            maxValue: 5,
            normalFill: 'black',
            ratedFill: 'orange',
  
        })
    </script>
  
</body>
  
</html>