当前位置：首页 > 网页特效 > 星级评分

简单实用的轻量级jQuery评分插件

分类：星级评分日期：2024-05-14 点击(0) 评论(0)

简单实用的轻量级jQuery评分插件

简介

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

```html
<link href="css/fontawesome-stars.css">
<script src="js/jquery.js"></script>
<script src="js/jquery.barrating.min.js"></script>    
```            
#####  HTML结构
该评分插件的HTML结构是标准的<select>元素。

```html
<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元素加载完毕之后，可以通过下面的方法来初始化该评分插件。

```html
<script type="text/javascript">
   $(function() {
      $('#example').barrating({
        theme: 'fontawesome-stars'
      });
   });
</script>     
```           
通过上面的初始化，select元素将被包裹到一个带.br-theme-fontawesome-stars class的div元素中，得到的结构如下：

```html
<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选项：

```html
<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属性，例如：

```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> 
```

web299.com

简单实用的轻量级jQuery评分插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果