一款好用的jquery评分插件

一．使用说明

1.jQuery评分插件的功能：

图标显示用户评分，更美观

可实时点击，切换评分

返回用户评分，记录用户评分

实现类似下图效果

 

2.优点：

   美观，方便

3.缺点：

    只能用于jquery开发

二．开发步骤说明

1．下载

去http://www.htmleaf.com/ 下载jQuery Raty插件压缩包，

然后解压。

解压成功如下图：

 

2.使用步骤：

 （1）、在body下创建一个div，装评分图片

  如：

 

（2）、把下载下来的jquery.raty.js或者jquery.raty.min.js放在项目文件夹当中，以及jquery脚本文件直接复制到你的项目相应目录中即可。

（3）、引入js文件

（4）、在js中调用raty()方法

 

此时已经引入了默认的评分图片

效果为

由于没有引入压缩包中的img文件夹

（5）引入img文件夹

效果为：

（6）星星图片不在一行是由于包含我们raty插件的那个DIV被加了个width：100px样式，这是插件脚本自己设定的

 解决方法：

：

效果：

    

基本的效果就实现了，插件还可以自定义API

（7）可定义path属性可以指定我们要使用的图标的位置。现在我们将项目中的img文件夹移到其他地方，比如这里我把它移到Styles文件夹下

  如

则在raty()中写path属性

（8）、我们可以使用自定义的图标，也可以使用其他自带的图标，压缩包内可以找到更大的星星图标，以及勋章笑脸图标等将doc文件夹img文件夹内的所以有图标复制到我们项目中的img文件夹中来。更改图标通过插件的starOff和starOn属性。

其中starOff为鼠标移入的图片，starOn为原本的图片

 

效果：

 

换一组图片：

做法：

 

效果：

 

小数评分：

做法：

 

效果

 

（9）设置提示文本

指针放到星星上默认显示‘bad’‘poor’‘reuglar’…可以自定义要显示的文本，通过hints属性。一次写入鼠标滑过你想出现的提示即可，用数组的方式

例

 

效果：

 

（10）、获取用户选择的值

　　最为重要的环节就是获取用户所选择的值。插件提供了不止一种的方式可以让你得到用户的选择值，这里介绍两种方式。

1. 通过click事件来获取。Click里面定义一个函数来处理获取的值，这个选择值通过’score’参数传递。参数不需要自己定义

用法：

 

　  效果：

2. 第二种方式可以设置一个隐蔽的HTML元素来保存用户的选择值，然后可以在脚本里面通过jQuery选中这个元素来处理该值。

　　现在在我们的star DIV下面再放一个DIV，用来保存用户的选择：

做法：

 

接下来在脚本代码里将这个DIV设置target属性，需要注意的是，还要将targetKeep 属性设置为true，用户的选择值才会被保持在目标DIV中，否则只是鼠标浮上时有值，而鼠标离开后这个值就会消失

做法：

 

效果为：

 

如果我们只是想拿它来暂时存放这个值，并没想让它显示出来，所以可以让这个DIV一直隐藏，我们通过这个DIV来获取值并进行我们需要的各种处理，比如送回服务器保存到数据库等。跟上面唯一不同就是获取该值的方式不同，用text()方法

具体代码：

 

效果为：

 

这个插件还有很多有趣的功能，压缩包有详尽的解释。

三．相关参考网址

1. jquery插件库 http://www.jq22.com/

2.jquery之家   http://www.htmleaf.com/