Ratyli-简单的jQuery星级评分插件

Ratyli是一款简单实用的jQuery星级评分插件。该星级评分插件使用简单，不需要额外的CSS样式，并且可以和Font Awesome字体图标集合使用。

使用方法

使用该星级评分插件需要引入jQuery(1.7+)和jquery.ratyli.min文件。

<script src="jquery.min.js"> </script>
<script src="jquery.ratyli.min.js"></script>                
              

HTML结构

你可以使用一个内联元素如<span>来作为该星级评分的容器。

<span class="ratyli" data-rate="3" data-ratemax="5"></span>             
              

其中data-rate属性是已点击的星星，data-ratemax是星星的总数。另外你可以通过data-full属性来自定义已经点击的星星的外观，通过data-empty来自定义未点击的星星的外观。

初始化插件

在页面DOM元素加载完毕之后，可以通过ratyli()方法来初始化该星级评分插件。

$(function() {
    $('.ratyli').ratyli();
});             
              

CSS样式

该星级评分插件不需要额外的CSS样式，但是你可以通过下面的CSS选择器来自定义星级评分的样式。

.ratyli{} /* container style*/
.ratyli.rated{} /* container style after rating*/
.ratyli .rate{} /* sign style*/
.ratyli .rate-active{} /* sign hover style */
.ratyli .rate-full{} /* full sign style */
.ratyli .rate-empty{} /* empty sign style */
/*etc..*/                
              

于Font Awesome结合使用

你可以使用Font Awesome字体图标来作为星级评分的星星。

$(".ratyli").ratyli({
  full:"<i class='fa fa-thumbs-up'></i>",
  empty:"<i class='fa fa-thumbs-o-up'></i>",
});
              

Ratyli星级评分插件的github地址为：https://github.com/peet86/Ratyli