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

当前位置:主页 > jQuery库 > 评分和星级 > Ratyli-简单的jQuery星级评分插件
Ratyli-简单的jQuery星级评分插件
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2015-12-25
    阅读:
简要教程

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