jquery-bar-rating是一款小巧的简单实用的轻量级jQuery评分插件。该评分插件是将一个标准的select元素转换为评分组件。你可以通过CSS来渲染评分组件的样式，插件中提供了6种不同的主题样式。它还内置了一些CSS星级评分样式。

安装

可以通过Bower来安装该评分插件。

bower install jquery-bar-rating

使用方法

使用该评分插件你需要引入jQuery（1.7.2+），jquery.barrating.min.js文件，并选择一种你需要的主题样式CSS文件将其引入，例如选择fontawesome-stars.css样式文件。

<link href="css/fontawesome-stars.css">
<script src="js/jquery.js"></script>
<script src="js/jquery.barrating.min.js"></script>
HTML结构

该评分插件的HTML结构是标准的<select>元素。

<select id="example">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>
初始化插件

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

<script type="text/javascript">
   $(function() {
      $('#example').barrating({
        theme: 'fontawesome-stars'
      });
   });
</script>

通过上面的初始化，<select>元素将被包裹到一个带.br-theme-fontawesome-stars class的<div>元素中，得到的结构如下：

<div class="br-wrapper br-theme-fontawesome-stars">
  <select id="example">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
  </select>
  ...rating widget...
</div>

配置参数

  • theme：默认值：''。指定一种评分主题。
  • initialRating：默认值：null。指定初始化时评分的值，如果为空，插件会查找带有selected属性的option项。
  • showValues：默认值：false。如果设置为true，将会在评分上显示数值。
  • showSelectedRating：默认值：true。显示用户选择的分数。
  • reverse：默认值：false。如果设置为true，评分系统将反向。
  • readonly：默认值：false。如果设置为true，评分系统将只读。
  • fastClicks：默认值：true。在触摸设备上移除300ms的点击延迟。
  • wrapperClass：默认值：'br-wrapper'。指定包裹div容器的class名称。

方法

  • $('select').barrating('show');：显示评分组件。
  • $('select').barrating('set', value);：设置评分组件的值。
  • $('select').barrating('clear');：清空评分数值。
  • $('select').barrating('destroy');：销毁评分组件实例。

回调函数

  • onSelect:function(value, text)：当一个分数被选择的时候触发。
  • onClear:function(value, text)：当评分被清除的时候触发。
  • onDestroy:function(value, text)：当评分组件被销毁的时候触发。

小技巧

如何在初始化时设置为空的评分值？

如果你想在页面初始化的时候将评分组件设置为空的分值，可以简单的添加一个空的option选项：

<select id="example">
  <option value=""></option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
如何指定显示在评分上的文本？

插件中提供的showValues参数可以实现在评分值上显示文本。如果你想设置一些额外的显示文本，可以为每一个<option>元素设置data-html属性，例如：

<select id="example">
  <option value="1" data-html="一般">1</option>
  <option value="2" data-html="不错">2</option>
  <option value="3" data-html="非常好">3</option>
</select>