Jquery Raty 星级评分插件使用方法
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> 相关推荐
EdwardSiCong 2020-11-23
85477104 2020-11-17
hhanbj 2020-11-17
81427005 2020-11-11
seoppt 2020-09-13
honeyth 2020-09-13
WRITEFORSHARE 2020-09-13
84483065 2020-09-11
momode 2020-09-11
85477104 2020-08-15
83510998 2020-08-08
82550495 2020-08-03
tthappyer 2020-08-03
84901334 2020-07-28
tthappyer 2020-07-25
TONIYH 2020-07-22
tztzyzyz 2020-07-20
83510998 2020-07-18
81463166 2020-07-17