Raty 打星评分

raty 可以通过很简单的方式实现打星评分功能

官网

jQuery Raty - A Star Rating Plugin

引入插件所需 css/js 文件

1
2
<link href="${ctx }/assets/plugins/jquery-raty/jquery.raty.css" rel="stylesheet" type="text/css">
<script src="${ctx }/assets/plugins/jquery-raty/jquery.raty.js" type="text/javascript"></script>

定义一个 div 用于展现内容

1
<div class="course-grade-panel" data-name="totalGrade" data-score="3"></div>

调用插件初始化方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
$courseSummaryPanel.find(".course-grade-panel").raty({
	  // 指定需要显示的图片路径
    path: g_rootPath + "/assets/plugins/jquery-raty/images/",
	  // 定义记录评分的 input[name]
    scoreName: function () {
        return $(this).data("name");
    },
	  // 评分赋初值
	  // 如果 halfShow = true ,赋值支持小数点
	  // score <= x.25 则忽略小数点
	  // x.26 <= score <= x.75 则计为半颗星
	  // score >= x.76 则计为一颗星
    score: function () {
        return $(this).data("score");
    },
	  // 只读
    readOnly: function () {
        if ($(this).data("score") > 0) {
            return true;
        }
    },
	  // 设定星星的数量
	  number: 10,
	  // 如果设置为只读模式,将鼠标放到星星上则会显示以下文字
	  noRateMsg: "现在不能评分!",
	  // 禁止显示半颗星
	  halfShow: false,
	  // 更改 halfShow 的四舍五入规则
	  round: {
		down: .26,
		full: .6,
		up: .76
	  }
	  // 禁止打半颗星
	  half: false
});