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>
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!