jquery.raty-评级插件

最新推荐文章于 2024-08-09 07:40:40 发布

iteye_20151

最新推荐文章于 2024-08-09 07:40:40 发布

阅读量295

点赞数

分类专栏： jquery 文章标签： jquery;raty

jquery 专栏收录该内容

6 篇文章

订阅专栏

本文介绍jQueryRaty评级插件的使用方法，包括如何在页面中引入插件、设置不同类型的评级（如只读评级、自定义星星数量、自定义提示和图片等），并展示了一个完整的实例，包含多种功能演示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jquery.raty-评级插件,很好用的
其中jquery.raty.min.js已经汉化了（其实就是翻译了下）：
<script type="text/javascript" src="js/jquery.raty.min.js" charset="gbk"></script>
中的charset="gbk" 用其他的编码格式会乱码


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta http-equiv="Pragma" content="no-cache"/>
		<meta http-equiv="Expires" content="-1"/>
		<title>jQuery Raty评级插件</title>

		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/jquery.raty.min.js" charset="gbk"></script>

	</head>
	<body>





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



		<div class="session">以一个分数开始，只读:</div>
		<div id="fixed"></div>


		<div class="session">自己制定星星的个数:</div>
		<div id="custom"></div>



		<div class="session">自定义提示和图片:</div>
		<div id="target"></div>



		<div class="session">使用onclick回调函数:</div>
		<div id="click"></div>



		<div class="session">显示半颗星星:</div>
		<div id="half"></div>


		<div class="session">默认的取消按钮:</div>
		<div id="cancel"></div>


		<div class="session">自定义的取消按钮:</div>
		<div id="cancel-custom"></div>

	</body>

	<script type="text/javascript">
		$(function() {
		   $('div#star').raty();

			$('div#fixed').raty({
				readOnly:	true,
				start:		2
		   });

			$('div#custom').raty({
				scoreName:	'entity.score',
				number:		10
			});

			$('div#target').raty({
				hintList:	['2008冠军', '2009冠军', "2010冠军", '2011冠军', '2012冠军'],
			   	starOn:		'medal-on.png',
			   	starOff:	'medal-off.png'
			});

			$('div#click').raty({
				onClick: function(score) {
					alert('score: ' + score);
				}
			});

			$('div#half').raty({
				start: 3.3,
				showHalf: true
			});

		   $('div#cancel').raty({
				showCancel: true
			});

		   $('div#cancel-custom').raty({
				cancelHint: '取消评级分数！',
				cancelPlace: 'right',
				showCancel: true,
				onClick: function(score) {
					alert('score: ' + score);
				}
			});

		});
	</script>
</html>


$(function() {
			$('div#gjw').raty({
				readOnly:	false,
				start: 0,
				number: 5,
				hintList:	['糟糕透了', '不理想', "一般般", '很好', '棒极了'],
			   	starOn:		'medal-on.png',//设置图片，有默认的
			   	starOff:	'medal-off.png',
			   	showCancel: true,
			   	cancelPlace: 'left',//取消按钮的位置
			   	cancelHint: '取消评级分数！',
			   	onClick: function(score) {
					$("#score").val(score);
				}
		   });

		});