一款好用的jquery评分插件

时间:2021-03-11 20:09:10

一.使用说明

1.jQuery评分插件的功能:

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

可实时点击,切换评分

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

实现类似下图效果

一款好用的jquery评分插件

2.优点:

美观,方便

3.缺点:

只能用于jquery开发

二.开发步骤说明

1.下载

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

然后解压。

解压成功如下图:

一款好用的jquery评分插件

2.使用步骤:

(1)、在body下创建一个div,装评分图片

如:

一款好用的jquery评分插件

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

(3)、引入js文件

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

一款好用的jquery评分插件

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

效果为一款好用的jquery评分插件

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

(5)引入img文件夹

效果为:一款好用的jquery评分插件

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

解决方法:

一款好用的jquery评分插件

效果:

一款好用的jquery评分插件

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

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

一款好用的jquery评分插件

则在raty()中写path属性

一款好用的jquery评分插件

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

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

一款好用的jquery评分插件

效果:

一款好用的jquery评分插件

换一组图片:

做法:

一款好用的jquery评分插件

效果:

一款好用的jquery评分插件

小数评分:

做法:

一款好用的jquery评分插件

效果

一款好用的jquery评分插件

(9)设置提示文本

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

一款好用的jquery评分插件

效果:

一款好用的jquery评分插件

(10)、获取用户选择的值

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

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

用法:

一款好用的jquery评分插件

   效果:

一款好用的jquery评分插件

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

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

做法:

一款好用的jquery评分插件

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

做法:

一款好用的jquery评分插件

效果为:

一款好用的jquery评分插件

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

具体代码:

一款好用的jquery评分插件

效果为:

一款好用的jquery评分插件

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

三.相关参考网址

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

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