现在做网页已经不仅限于实现功能了,更多的是要实现功能的同时追求更加美观的实现。比如页面上让用户评分的功能,你完全可以放5个RdioButton让用户选择分数,也可以用DropDownList来实现,但那样不如用五个星星来得炫来得直观。

  像这样的星星评分插件用得非常普遍,几乎要成为你随手捻来的小菜,任何一个不具备使用这样插件的前端程序员都是毫无战斗力的。

  这里给大家介绍一个实现这样的评分效果的小插件jQuery Raty。它提供的API相当丰富真的是让人爱不释手。详细文档及下载插件请移步这里

基本使用

  下面我们来实际操作,运用一下这个有爱的小插件。

  需要做的事情非常简单,在页面上放一个DIV,id取名为‘star’或者什么的随你所以爱,用来显示我们的评分插件。

1 <div id="star"></div>

  当然,记得把下载下来的jquery.raty.js或者jquery.raty.min.js放在项目文件夹当中。同时,由于是基于jQuery的,所以包含jQuery的脚本文件那是必需的。这三个脚本文件都可以在下载后的压缩包内的js文件夹内找到。直接复制到你的项目相应目录中即可。

  然后,在页面中用<Script>标签将刚才的脚本引进页面当中。

1 <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
2
3 <script src="Scripts/jquery.raty.js" type="text/javascript"></script>

现在,只需一句代码就可以实现评分了。在页面添加如下语句:

1 <script type="text/javascript">
2
3 $('#star').raty();
4
5 </script>

  运行我们的网站程序来看一下效果。

  没出现星星不说,排版还一团乱。但看到这个情形,我们应该知道是缺少相应的图片或者CSS样式表。将压缩包内的img文件夹复制到项目中,就应该能解决图片缺失的问题了。

  需要注意的就是图片路径问题,默认它会在根目录打img文件夹中的图片,如果你需要将图片放到其他地方,需要在代码中指定,这在后面介绍。

  刷新页面看效果:

  图片是出来了,排版还是乱的,而且有HTML符号&#160没有被正确解析。这个符号代表空格,对应着&nbsp,这里应该是脚本里面的问题。所以这里提出一个使用这个插件需要注意的地方:jQuery要求1.5及以上版本。如果你一开始用的不是1.4的版本,恭喜你你不会出现这里的问题。

  现在将jQuery换掉:

  同时修改页面当中的引用。

1 <script src="Scripts/jquery-1.5.1.js" type="text/javascript"></script>

  现在刷新页面查看效果,一切正常了。

指定图标

  上面介绍的是基本的使用,这个插件最让人喜爱的地方在于他提供了非常多的API供我们自定义,实现一些我们想要的功能和效果。

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

  然后刷新页面,同样会出现找不图片的错误,这时候,在脚本里面设置一下path属性:

1 <script type="text/javascript">
2
3 $('#star').raty({
4
5 path:"Styles/img"
6
7 });
8
9 </script>

  再去刷新页面效果又出来了,并且我们可以通过查看页面的源码发现,图片的调用确实是我们指定的地方:

  我们可以使用自定义的图标,也可以使用其他自带的图标,压缩包内可以找到更大的星星图标,以及勋章笑脸图标等。

  现在将doc文件夹img文件夹内的所以有图标复制到我们项目中的img文件夹中来。更改图标通过插件的starOff和starOn属性。

  下面将图标换成大的:

 1 <script type="text/javascript">
2
3 $('#star').raty({
4
5 path:"Styles/img",
6
7 starOff: 'star-off-big.png',
8
9 starOn: 'star-on-big.png'
10
11 });
12
13 </script>

  只需写上相应图标的文件名即可,如果要使用勋章则应该是medal-on.png和medal-off.png,现在刷新页面看效果,有点不理想:

  星星没有排成一排了,挤了两个下去。是不是很奇怪。查看一下页面代码,发现包含我们raty插件的那个DIV被加了个width:100px样式。

  可我们并没有给DIV设置任何样式啊,这只能是插件的脚本自己设置的。因为在小星星时,100的宽度刚好,现在换在大星星了一排的位置不够了所以被挤了两个下去。这里需要通过size属性来设置一下宽度从而将五个大星星重新显示到一排来:

 1 <script type="text/javascript">
2
3 $('#star').raty({
4
5 path:"Styles/img",
6
7 starOff: 'star-off-big.png',
8
9 starOn: 'star-on-big.png',
10
11 size:24
12
13 });
14
15 </script>

设置显示文本

  指针放到星星上默认显示‘bad’‘poor’‘reuglar’…可以自定义要显示的文本,通过hint属性。

  现在换成1,2,3…

 1 <script type="text/javascript">
2
3 $('#star').raty({
4
5 hints: ['1', '2', '3', '4', '5'],
6
7 path:"Styles/img",
8
9 starOff: 'star-off-big.png',
10
11 starOn: 'star-on-big.png',
12
13 size:24
14
15 });
16
17 </script>

获取用户选择的值

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

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

  这里通过弹窗显示出用户选择的值:

 1 <script type="text/javascript">
2
3 $('#star').raty({
4
5 hints: ['1', '2', '3', '4', '5'],
6
7 path:"Styles/img",
8
9 starOff: 'star-off-big.png',
10
11 starOn: 'star-on-big.png',
12
13 size:24,
14
15 click: function (score, evt) {
16
17 alert('u selected '+score);
18
19 }
20
21 });
22
23 </script>

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

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

1 <script src="Scripts/jquery.raty.js" type="text/javascript"></script>
2
3 <div id="star">
4
5 </div>
6
7 <div id="result">
8
9 </div>

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

 1 <script type="text/javascript">
2
3 $('#star').raty({
4
5 hints: ['1', '2', '3', '4', '5'],
6
7 path: "Styles/img",
8
9 starOff: 'star-off-big.png',
10
11 starOn: 'star-on-big.png',
12
13 size: 24,
14
15 target: '#result',
16
17 targetKeep : true
18
19 });
20
21 </script>

  现在,用户的选择会在下面的DIV中被显示出来。

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

 1 <script type="text/javascript">
2
3 $("#result").hide();//将保存结果的DIV隐藏
4
5 $('#star').raty({
6
7 hints: ['1', '2', '3', '4', '5'],
8
9 path: "Styles/img",
10
11 starOff: 'star-off-big.png',
12
13 starOn: 'star-on-big.png',
14
15 size: 24,
16
17 target: '#result',
18
19 targetKeep : true
20
21 });
22
23 //弹出结果
24
25 var text = $('#result').text();
26
27 $('img').click(function () {
28
29 if ($('#result').text() != text) {
30
31 alert($('#result').text());
32
33 return;
34
35 }
36
37 });
38
39 </script>
 

  这个插件还有很多有趣的功能,大家可以自己去探寻,它强大到真的能满足你在项目中的各种需求。

  本文例子源码下载:点我

一个非常棒的jQuery 评分插件--好东西要分享的更多相关文章

  1. 20 个最棒的 jQuery Tab 插件

    jQuery Tab 常用来做网页上的选项设置界面和导航,本文向你推荐最棒的 20 个 jQuery Tab 插件.Enjoy !! 1. Slider Tabs SliderTabs 是一个可定制的 ...

  2. 21个很棒的jQuery分页插件下载

    分页是指将一个大内容划分为各种不同的页面,因此网站的分页是一个很重要的部分,必须让内容有组织性和易于访问.分页有各两种不同的方式,手动跟自动.最受欢迎简单和广泛的方法是jQuery插件.下面我们收集了 ...

  3. 一款好用的jquery评分插件

    一.使用说明 1.jQuery评分插件的功能: 图标显示用户评分,更美观 可实时点击,切换评分 返回用户评分,记录用户评分 实现类似下图效果 2.优点: 美观,方便 3.缺点: 只能用于jquery开 ...

  4. 推荐10款 好用的 Jquery 评分插件

    Raty jQuery Raty这是一个能够自动生成可定制的星级评分jQuery插件.可以自定义图标,创建各种评级组合,星星数量,每一颗星星的注释,可以在当一个星星被点击时的加回调函数. 地址: Ra ...

  5. jQuery 评分插件(转)

    评分效果的小插件jQuery Raty.它提供的API相当丰富真的是让人爱不释手.详细文档及下载插件请移步这里. 基本使用 下面我们来实际操作,运用一下这个有爱的小插件. 需要做的事情非常简单,在页面 ...

  6. jquery评分插件jquery.raty.js

    1.参考链接 官方地址. 教程一 教程二 2.案例1 引入文件: <!-- 评分插件 --> <script type="text/javascript" src ...

  7. 《JQuery常用插件教程》系列分享专栏

    <JQuery常用插件教程>已整理成PDF文档,点击可直接下载至本地查阅https://www.webfalse.com/read/201719.html 文章 使用jquery插件实现图 ...

  8. 分享一款超棒的jQuery旋钮插件 - jQuery knob

    转自:http://www.cnblogs.com/gbin1/archive/2012/05/08/2489908.html 在线演示  本地下载 如果你也在寻找一款生成漂亮旋钮(knob)的jQu ...

  9. 一个特别不错的jQuery快捷键插件:js-hotkeys

    这其实不是什么新技术,这个插件在很早前就已经发布了,之前有项目用到,所以分享出来添加方式的例子 jQuery.hotkeys.add('esc',function (){ //执行函数 }); jQu ...

随机推荐

  1. Struts2 上传下载

    一. 1.文件上传是web应用经常用到的一个知识.原理是,通过为表单元素设置enctype=”multipart/form-data”属性,让表单提交的数 据以二进制编码的方式提交,在接收此请求的Se ...

  2. SQL Server 2014 Agent 无法启动

    - <Event xmlns="http://schemas.microsoft.com/win/2004/08/events/event">- <System& ...

  3. 基础地图Android SDK

    开发者可利用SDK提供的接口,使用百度为您提供的基础地图数据.目前百度地图SDK所提供的地图等级为3-21级,所包含的信息有建筑物.道路.河流.学校.公园等内容. V3.7.0起,地图支持缩放至21级 ...

  4. python操作word(改课文格式)【最终版】

    python操作word的一些方法,前面写了一些感悟,有点跑题,改了下题目,方便能搜索到.心急的可以直接拉到最后看代码,我都加了比较详细的注释. 从8.3号早上9点,到8.8号下午5点半下班,终于把这 ...

  5. java Web监听器导图详解

    监听器是JAVA Web开发中很重要的内容,其中涉及到的知识,可以参考下面导图: Web监听器 1 什么是web监听器? web监听器是一种Servlet中的特殊的类,它们能帮助开发者监听web中的特 ...

  6. tiny4412 u-boot 启动参数的设置

    参考 http://www.cnblogs.com/chenfulin5/p/5887552.html 制作SD卡 u-boot 编译完之后, 进入 u-boot 目录里面的 sd_fuse cd ~ ...

  7. 手把手教你利用微软的Bot Framework,LUIS,QnA Maker做一个简单的对话机器人

    最近由于要参加微软亚洲研究院的夏令营,需要利用微软的服务搭建一个对话Bot,以便对俱乐部的情况进行介绍,所以现学了几天,搭建了一个简单的对话Bot,期间参考了大量的资料,尤其是下面的这篇博客: htt ...

  8. C#string数组转换到int数组并得到最大最小值

    string[] input = { "1", "2", "3", "4", "5", " ...

  9. ThinkPHP 的URL重写时遇到No input file specified的解决方法

    因为在Fastcgi模式下,php不支持rewrite的目标网址的PATH_INFO的解析 ThinkPHP运行在URL_MODEL=2时,会出现 No input file specified.的情 ...

  10. MFC显示bmp图像

    有了bmp文件读写的基础,我们就能够開始用MFC显示BMP图片了. 在这里,事实上微软为我们提供了一个实现bmp文件显示的框架,名叫diblook,我们能够先下载下来看看. 以下上链接:DIBLOOK ...