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

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

基本要求

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");
  });