博客

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

  • Post category:jquery

JQuery RateYo 是 JQuery 的星级评价插件，它通过简单的配置就可以轻松实现自定义的星级评价系统。下面是使用 RateYo 插件实现星级评价系统的完整攻略：

步骤 1: 引入 jQuery 和 RateYo 插件

首先需要在页面中引入 JQuery 和 RateYo 插件的脚本文件：

<!-- 引入 JQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- 引入 RateYo 插件 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.js"></script>

步骤 2: 创建页面元素

在页面中创建一个元素用于展示星级评价系统：

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

步骤 3: 初始化 RateYo 插件

在页面加载完毕之后，通过 JavaScript 代码初始化 RateYo 插件，并配置相关参数，如星级数量、颜色等：

$(document).ready(function(){
  $("#rateYo").rateYo({
    starWidth: "30px",
    numStars: 5,
    minValue: 1,
    maxValue: 5,
    ratedFill: "#FFD700",
    fullStar: true,
    onSet: function (rating, rateYoInstance) {
        alert("你给了" + rating + "颗星！");
    }
  });
});

以上代码会创建一个 5 颗星的评价系统，星级大小为 30 像素，选中的星级颜色为黄色。并通过 onSet 回调函数在用户进行评分操作后获取用户的评分。

示例说明一：自定义星级数量和半星评价

如果需要实现自定义的星级数量和支持半星评价，只需要将 numStars 参数设置为更大的数值，如 10 等，并将 fullStar 参数设置为 false。然后通过 CSS 样式来控制半星的显示效果，如下：

$(document).ready(function(){
  $("#rateYo").rateYo({
    starWidth: "30px",
    numStars: 10,
    minValue: 0,
    maxValue: 10,
    ratedFill: "#FFD700",
    fullStar: false,
    onSet: function (rating, rateYoInstance) {
        alert("你给了" + rating + "颗星！");
    }
  });
});

样式：

.rateyo .rateyo-container .rateyo-item {
  width: 20%;
  display: inline-block;
  position: relative;
}
.rateyo .rateyo-container .rateyo-item .rateyo-half-star{
  position: absolute;
  width: 50%;
  height: 100%;
  overflow: hidden;
  z-index: 9;
  left: 0;
}
.rateyo .rateyo-container .rateyo-item .rateyo-half-star:before{
  content: '';
  display: block;
  position: absolute;
  width: 200%;
  height: 100%;
  background: #FFD700;
  left: -50%;
}

这样就可以实现支持半星评价的星级评价系统了。

示例说明二：添加自定义图片作为星级图标

如果需要使用自定义的星级图标，只需要在初始化时把 starSvg 参数设置为自定义 SVG 图片地址即可。

$(document).ready(function(){
  $("#rateYo").rateYo({
    starWidth: "50px",
    numStars: 5,
    minValue: 0,
    maxValue: 5,
    ratedFill: "#FFD700",
    starSvg: '<svg viewBox="0 0 24 24"><defs><linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" style="stop-color: #FDB813; stop-opacity: 1"></stop><stop offset="100%" style="stop-color: #FF7432; stop-opacity: 1"></stop></linearGradient></defs><path fill="url(#grad1)" d="M12,16.3l-4.6,2.8l1-5.7L2.4,9.8l5.7-0.8L12,2l3.9,6.9l5.7,0.8l-4.1,4.5l1,5.7L12,16.3z M12,14.1l2.6,1.6l-0.6-3.5 l2.1-2.3l-3-0.4L12,6.4L9.9,9.2l-3,0.4l2.2,2.3l-0.6,3.5L12,14.1z" /></svg>',
    onSet: function (rating, rateYoInstance) {
        alert("你给了" + rating + "颗星！");
    }
  });
});

这里使用一个渐变的 SVG 图片作为了星级图标，并设置星级的宽度为 50 像素。更换具体图标时只需要替换 starSvg 参数值即可。

综上所述，使用 JQuery RateYo 插件实现星级评价系统非常简单，只需要通过初始化和配置即可。同时支持自定义星级数量、自定义半星评价和自定义星级图标等功能。

Tags: