Jquery raty 是一个非常好用的评分插件，只需要很简单的几行代码就可以实现评分功能。
大家可以在下面连接下载最新的Jquery raty插件。
https://github.com/wbotelhos/raty
来让我们看看是怎么实现的吧。
1.引入Jquery和Raty的JS文件。（这里不需要引入CSS）
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="js/jquery.raty.js"></script>
2.将图片拷贝到i相应文件夹中。例如：images （star-on.png和star-off.png，一个黄色星星图片，一个灰色星星图片）。
3.在页面中添加一个空的<div>标签。
<div id="starts"></div>
4.在页面上使用Jquery调用即可。
$(function(){
$("#starts").raty({
number : 5,//星星个数
path : 'images',//图片路径
starOn : 'star-on.png',//黄色星星图片（可自定义）
starOff : 'star-off.png',//灰色星星图片（可自定义）
target : '#title',//显示标题
hints : ['很差','一般','不错','很好','满意'],//自定义标题
click : function(score, evt) {
$("#grade").val(score);//将分数保存到<input>中
}
});
});
5.完整代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>RATY</title>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jquery.raty.js"></script>
<style>
.evaluate{
width:100%;
}
#starts{
width:150px;
float:left;
}
#title{
width:200px;
float:left;
}
</style>
</head>
<body>
<div class="evaluate">
<div id="starts"></div><div id="title"></div>
</div>
<br>
<input type="text" id="grade" />
<script type="text/javascript">
$(function(){
$("#starts").raty({
number : 5,//星星个数
path : 'images',//图片路径
//starOn : 'img-full-star.png',
//starOff : 'img-full-star-grey.png',
target : '#title',//
hints : ['很差','一般','不错','很好','满意'],
click : function(score, evt) {
$("#grade").val(score);//
}
});
});
</script>
</body>
</html>
相关推荐
《jQuery Raty：星级评分插件详解》 在网页交互设计中，用户评分系统是一个常见的功能，它能够直观地展示用户对产品或服务的满意度。jQuery Raty是一款强大的星级评分插件，以其易于使用和高度可扩展性在开发社区中...
《jQuery Raty星级评分插件详解及应用》 在网页设计和开发中，用户交互体验是至关重要的元素之一，而星级评分系统则是提升用户体验的有效工具。jQuery Raty插件正是一款专为此目的设计的JavaScript库，它使得在网页...
本文实例讲述了jQuery Raty星级评分插件使用方法。分享给大家供大家参考，具体如下： 使用jQuery Raty，可以很方便的在页面上嵌入一个评分组件，如下所示： 使用方法很简单，首先从...
**jQuery Raty星级评分插件**是一个用于网页交互设计中的评价和评分功能的JavaScript插件。这个插件基于广泛使用的**jQuery**库，为开发者提供了一种简单且可定制的方式来实现用户友好的星级评分系统。它允许用户...
**jQuery Raty星级评分插件详解** 在网页交互设计中，评分系统是一个常见的功能，它可以帮助用户快速地表达对某个内容或服务的满意度。jQuery Raty插件就是为实现这一功能而生的，它提供了丰富的自定义选项和灵活的...
jQuery Raty星级插件是一款广泛应用于网页评价系统的JavaScript库，它允许用户轻松地在网页上添加可交互的评分系统。这个插件通过结合强大的jQuery框架，提供了丰富的自定义选项和功能，使得创建美观且功能丰富的...
本篇文章将深入探讨一个基于jQuery的五角星评分插件的使用方法。 该插件名为“wbotelhos/raty”，在压缩包文件中提供了示例（demo）和必要的JavaScript资源，允许开发者快速地在项目中实现五星评级功能。只需简单...
本文将详细介绍jQuery Raty的使用方法和核心功能，帮助开发者快速掌握这一工具。 首先，jQuery Raty的核心功能在于其星星打分的交互设计。该插件包含一组星星图像，用户可以通过鼠标点击选择不同的星级，同时支持半...
总的来说，jQuery Raty是一个强大且灵活的星级评分插件，其丰富的功能和自定义选项使得在网页开发中实现星星评分变得轻而易举。通过深入理解和实践，你可以打造出富有互动性和吸引力的评分系统。
`jQuery-raty`是一款基于JavaScript库`jQuery`的星形评分插件，它为网站提供了简单易用且可自定义的评分功能。这个插件允许用户通过点击星星图标来给出评分，同时也支持鼠标悬停时预览评分效果，极大地提升了用户...
总结来说，`jQuery.raty`是一款功能强大且易于使用的评分插件，其灵活性和易用性使其成为开发者在构建互动式评分系统的首选工具。无论是在电商网站的商品评价、博客文章的评分还是其他需要用户反馈的场景，都能看到`...
**jQuery星级评分插件——Raty详解** 在Web开发中，提供用户友好、直观的界面是至关重要的。其中，星级评分系统是常见的交互元素，用于评价产品、服务或内容的质量。Raty是一款基于jQuery的开源插件，它使得在网页...
此外，还可以通过调整参数来改变评分插件的行为，例如设置星星数量、评分精度等。 **4. 示例应用场景** jQuery Raty适用于各种场景，包括产品评价、用户反馈、在线调查等。例如，在电商网站中，用户可以使用这个...
明锋工作室提供的此插件是一款功能强大的jquery评分插件jquery.raty，可灵活设置33个参数，可以显示数值和自定义字符串数组，比以往分享的星级评分插件功能强多了，使用也比较简单，最简单的使用初始化jquery代码就...
综上所述，jQuery Raty不仅提供了简单的界面元素来实现星级评分功能，还提供了丰富的API和配置选项，使得开发者可以根据实际需要定制评分组件的表现和行为。通过插件的使用，开发者能够节省大量的开发时间，并提供给...
《jQuery星级评分插件详解及应用》 在Web开发中，星级评分系统是常见的用户反馈方式，它使得用户能够直观地表达对某个产品或服务的满意度。jQuery作为一款广泛使用的JavaScript库，提供了丰富的插件来实现这样的...
jQuery Raty插件是一个强大的工具，它为开发者提供了简单且灵活的方式来创建自定义的星级评分系统。这个插件是基于JavaScript库jQuery构建的，因此，对于熟悉jQuery的开发者来说，集成和定制会非常容易。 ### 1. ...
通过查看和学习这个示例，开发者能够快速掌握插件的使用方法，并将其应用于自己的项目。 总结来说，jQuery.raty是一个强大且易用的评星插件，为网站或应用的评分功能提供了简洁的解决方案。通过灵活的配置和丰富的...
`jQuery.raty.js`是一款高效、易用的评分插件，它通过直观的星星评分界面增强了用户体验。通过深入理解插件的核心概念和配置选项，开发者可以轻松地将其集成到自己的项目中，定制出符合需求的评分系统。对于初学者和...