基于Bootstrap的jQuery星级评分插件bootstrap-star-rating

基于Bootstrap的jQuery星级评分插件bootstrap-star-rating

更新: 2017-07-15

阅读:10412

一个简单但强大的jQuery的星级评分的Bootstrap插件bootstrap-star-rating支持高级的功能,像小数星星填充和支持RTL输入。主要是通过利用纯CSS-3的风格来呈现控件进行开发。该插件使用Bootstrap标记和默认风格,但它可以用其它任意CSS标记覆盖。

bootstrap-star-rating更新版本:v4.0.2

基本要求

a、Bootstrap 3.x
b、最新版jQuery
c、支持CSS3和html5的现代浏览器

使用方法

1,引入相关文件 

<link href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<link href="css/star-rating.min.css" media="all" rel="stylesheet" type="text/css" />
<script src="http://apps.bdimg.com/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/star-rating.min.js" type="text/javascript"></script>

2,HTML标签,即是输入控件,绑定属性后将自动转换成星星

<input id="input-id" type="number" class="rating" min=0 max=5 step=0.5 data-size="lg" >

3,JavaScript

// 默认
$("#input-id").rating();

// 带参数
$("#input-id").rating({'size':'lg'});

参数

  • size:定义星星有大小,预置了5种大小样式 xl, lg, md, sm, xs; 默认样式md
  • step:步长增加的星星大小,默认为 0.5(一半星星)
  • disabled:不可用设置
  • readonly:只读设置
  • showClear:是否显示清除星星按钮;默认为True
  • showCaption
  • defaultCaption
  • starCaptions
  • starCaptionClasses

事件

  • rating.change
    $('#input-id').on('rating.change', function(event, value, caption) {
        console.log(value);
        console.log(caption);
    });
  • rating.clear
    $('#input-id').on('rating.clear', function(event) {
        console.log("rating.clear");
    });
  • rating.reset
    $('#input-id').on('rating.reset', function(event) {
        console.log("rating.reset");
    });
  • rating.hover
    $('#input-id').on('rating.hover', function(event, value, caption, target) {
        console.log(value);
        console.log(caption);
        console.log(target);
    });
  • rating.hoverleave
    $('#input-id').on('rating.hoverleave', function(event, target) {
        console.log(target);
    });
  • rating.refresh
    $('#input-id').on('rating.refresh', function(event) {
        console.log("rating.refresh");
    });