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>