Raty 打星评分

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

更多精彩

• 更多技术博客，请移步 asing1elife’s blog

官网

jQuery Raty - A Star Rating Plugin

引入插件所需 css/js 文件

<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 用于展现内容

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

调用插件初始化方法

$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
});