jQuery星星评分特效代码插件

jQuery星星评分特效代码插件

jsRapStar是一款jQuery评分插件。该jqurey评分插件取值可以精确到小数位,支持自定义评分样式,非常实用。

使用方法
在页面中引入jquery和jsRapStar.js、jsRapStar.css文件。

1
2
3
<link href="css/jsRapStar.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.min.js"></script>            
<script type="text/javascript" src="js/jsRapStar.js"></script>

HTML结构
使用一个

作为容器,在div上指定start属性作为初始值。

1
<div id="example" start="3"></div>

初始化插件
在页面DOM元素加载完毕之后,通过下面的方法来初始化该jQuery评分插件。

1
$('#example').jsRapStar();

可以实用unicode字符来自定义星星。

1
2
3
$('#example').jsRapStar({
  star:'★'
});

可以自定义星星的颜色和高度等属性。

1
2
3
4
5
6
7
8
9
10
11
12
$('#example').jsRapStar({
 
  // color
  colorFront: 'yellow',
 
  // background color
  colorBack: 'white',
 
  // size in pixels
  starHeight: 32
   
});

可以定义使用小数级评分数。

1
2
3
4
5
$('#example').jsRapStar({
 
  step: true
   
});

也可以禁止选择评分。

1
2
3
4
5
$('#example').jsRapStar({
 
  enabled: false
   
});

该jQuery评分插件的可用事件有:

1
2
3
4
5
6
7
8
9
10
11
12
$('#example').jsRapStar({
 
  onClick:function(score){
    $(this)[0].StarF.css({color:'red'});
    alert(score);
  },
 
  onMousemove:function(score){
    $(this).attr('title','Rating: '+score);
  }
     
});
当前内容只有登录了才能查看,如果您已经注册,请登录
1

发表评论