Jquery Raty 星级评分插件使用方法

最新推荐文章于 2024-03-11 17:11:56 发布

iteye_12453

最新推荐文章于 2024-03-11 17:11:56 发布

阅读量933

点赞数 1

分类专栏： Web前端文章标签： xhtml javascript ViewUI

本文链接：https://blog.csdn.net/iteye_12453/article/details/82608908

版权

Web前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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>

iteye_12453

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery Raty 星级评分插件使用方法

Jquery raty 是一个非常好用的评分插件，只需要很简单的几行代码就可以实现评分功能。大家可以在下面连接下载最新的Jquery raty插件。https://github.com/wbotelhos/raty来让我们看看是怎么实现的吧。1.引入Jquery和Raty的JS文件。（这里不需要引入CSS） &lt;script type="text/javascrip...
复制链接

扫一扫

专栏目录