站长资源
全栈工程师站点

jQuery星级评分插件-jquery.raty.js

jQuery星级评分插件-jquery.raty.js -1

jQuery Raty这是一个星级评分插件。可以自定义图标,创建各种评级组合,星星数量,每一颗星星的注释,可以在当一个星星被点击时的加回调函数。

使用到的素材图标素材

jQuery星级评分插件-jquery.raty.js -2

使用方法

引入JS

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

html结构,只需要一个div即可

<div id="star" data-num="3.5"></div>

JS部分,初始化插件及设置

$(function(){
	$("#star").raty({
		score:function(){
			return $(this).attr("data-num");
		},
		starOn:'resources/img/star-on-big.png',
		starOff:'resources/img/star-off-big.png',
		starHalf:'resources/img/star-half-big.png',
		readOnly:false,
		halfShow:true,
		size:34,
		
	})
});

里面的路径根据自己的实际路径修改

上述JS里面属性的介绍

score:需要显示的星星个数

starOn:鼠标放上去时显示的图标的位置

starOff:鼠标离开后显示的图标的位置

starHalf:需要显示的半星的标图的位置

readOnly:所显示的星星是否只读,默认非只读

halfShow:半个星星是否可以显示,默认可以

size:div显示的长度,太短了星星会换行

经过上述设置具体的效果如下

jQuery星级评分插件-jquery.raty.js -3

预览里面提供大家官方的文档介绍,如看不明白可以直接用我上述步骤实现

如需学习,可以下载示例研究


免费下载  在线演示  
×

站长资源极速下载通道: jQuery星级评分插件-jquery.raty.js

本文出处:来自互联网信息共享,请勿相信收费信息站长资源 » jQuery星级评分插件-jquery.raty.js

评论 抢沙发

评论前必须登录!