jQuery评分插件jsRapStar

当前位置:主页 > jQuery库 > 评分和星级 > jQuery评分插件jsRapStar
jQuery评分插件jsRapStar
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2018-09-27
    阅读:
简要教程

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

使用方法

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

<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>作为容器,在div上指定start属性作为初始值。

<div id="example" start="3"></div>
                
初始化插件

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

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

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

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

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

$('#example').jsRapStar({

  // color
  colorFront: 'yellow',

  // background color
  colorBack: 'white',

  // size in pixels
  starHeight: 32
  
});                    
                

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

$('#example').jsRapStar({

  step: true
  
});                 
                

也可以禁止选择评分。

$('#example').jsRapStar({

  enabled: false
  
});           
                

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

$('#example').jsRapStar({

  onClick:function(score){
    $(this)[0].StarF.css({color:'red'});
    alert(score);
  },

  onMousemove:function(score){
    $(this).attr('title','Rating: '+score);
  }
    
});       
                

该jQuery评分插件的github地址为:https://github.com/Thibor/jsRapStar

下一篇:没有了