JQuery 如何使用RateYo实现星级评价系统

rateYo :- rateYo是一个jQuery插件，用于创建一个星级评价小工具，允许在鼠标悬停时填充基于SVG（可扩展矢量图）的未评级部分的背景颜色。它是完全可定制和可扩展的，以适应任何设计需求。

使用RateYo实施星级评价系统的步骤。

安装:
#NPM

$ npm install rateYo

#Bower

$ bower install rateYo

你也可以使用谷歌托管/微软托管的内容交付网络（CDN）来包含一个版本的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>

2.在html页面的head部分添加所需的样式表。

<link rel="stylesheet" type="text/css" href="jquery.rateyo.min.css">

3.创建一个将作为星级评定容器的div。

<div id="rateYo"></div>

4.在html页面的body部分添加所需的样式表，并链接rateYo插件的javaScript文件以执行各种功能。

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

5.调用一个插件，将基本的星级评价渲染到你所创建的rateYo div中。

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

示例

<!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>

输出
JQuery 如何使用RateYo实现星级评价系统