基于SVG的jQuery星级评分插件-jRate

当前位置:主页 > jQuery库 > 评分和星级 > 基于SVG的jQuery星级评分插件-jRate
基于SVG的jQuery星级评分插件-jRate
分享:

    插件介绍

    jRate是一款基于SVG的jQuery星级评分插件。jRate评分插件提供许多参数,用于设置评分的星星个数、颜色、大小等属性。由于是SVG制作的,评分星星放大缩小都不会变形。

    浏览器兼容性

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

jRate是一款基于SVG的 jQuery 星级评分插件。jRate能够通过参数设置来提供各种实用的评分功能。

jRate星级评分效果动态图-1

jRate星级评分效果动态图-2

基本使用

在页面中引入jQuery和jRate.js文件。

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jRate.js"></script>
                

html结构:

<div id="jRate"></div>
                

然后按下面方法调用插件:

$("#jRate").jRate();
                

BOWER

bower install jqthumb
                

高级特性

设置评分星星的开始颜色和结束颜色

可以设置你喜欢的评分星星的开始颜色和结束颜色。颜色的取值可以是hex值、rgb值或标准的颜色名字。可以为评分条只提供一种同样的颜色。

$("#jRate").jRate({
  startColor: "cyan",
  endColor: "blue"
});
                
初始值

可以为已评分星星个数提供初始值。

$("#jRate").jRate({
  rating:2
});
                
宽度和高度设置

可以自定义评分星星的宽度和高度。

$("#jRate").jRate({
  width: 70,
  height: 70
});
                
评分图案

可以从可用的选项图型列表中选择评分图案。目前可用的图案有:STAR, RECTANGLE, SQUARE, CIRCLE, RHOMBUS, TRIANGLE。

$("#jRate").jRate({
  shape: 'RHOMBUS'
});
                
可增长的宽度和高度

使用growth字段可以使评分图形由小到大变化。

$("#jRate").jRate({
  widthGrowth: 0.2,
  heightGrowth: 0.2
});
                
计数

评分图形的数量由 count 属性决定。可以自定义它的数量。

$("#jRate").jRate({
  count: 10
});
                
背景颜色

可以使用hex值、rgb值和标准的颜色名字来设置背景颜色。

$("#jRate").jRate({
  backgroundColor: 'black'
});
                
描边颜色

可以设置评分图案的描边颜色。

$("#jRate").jRate({
  strokeColor: 'black'
});
                
间隙

可以设置两个图形之间的间隙。

$("#jRate").jRate({
  shapeGap: '10px'
});
                
透明度

可以设置评分图案的透明度。

$("#jRate").jRate({
  opacity: 0.3
});
                
最大值和最小值

可以设置所需的最大值和最小值。

$("#jRate").jRate({
  min: 10,
  max: 15
});
                
精度

可以设置需要的精度值。

$("#jRate").jRate({
  precision: 0
});
                
方向

可以通过布尔值来设置方向是水平的还是垂直的。也可以设置false来进行两个方向的交换。

$("#jRate").jRate({
  horizontal: false
});
                
反向

可以通过布尔值来设置是否反向显示。

$("#jRate").jRate({
  reverse: true
});
                
只读

可以将评分设置为只读模式。

$("#jRate").jRate({
  readOnly: true
});
                
onChange

当评分值改变时的一个回调函数。

$("#jRate").jRate({
  onChange: function(rating) {
    $('#demo-onchange-value').text("Your Rating: "+rating);
  }
});
                
onSet

当评分星星被点击或设置是的回调函数。

$("#jRate").jRate({
  onSet: function(rating) {
    $('#demo-onset-value').text("Selected Rating: "+rating);
  }
});
                

更多关于该评分插件的信息请参考:https://github.com/senthilporunan/jRate