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
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!