如何巧妙的编写评星功能

最新推荐文章于 2023-06-06 15:25:52 发布

BruceCheng夏夏

最新推荐文章于 2023-06-06 15:25:52 发布

阅读量973

点赞数 1

分类专栏：移动前端开发小随笔文章标签：评星插件 raty

本文链接：https://blog.csdn.net/brucecheng22/article/details/53895392

版权

移动前端开发小随笔专栏收录该内容

8 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
		<title>默认的五星评分</title>
		<script src="Resource/js/jquery.min.js"></script>
		<script src="Resource/js/jquery.raty.js"></script>
		<style type="text/css">
			p{border:2px dashed blue; padding: 5px}
            #out{margin-bottom:100px;}
		</style>
	</head>
	<body>
		<div>
		   <h2>默认评星</h2>
		   <div id="star"></div>
		   <p>
		   	$('#star').raty({</br/>
		       starOff: 'Resource/img/star-off-big.png',</br/>
		       starOn: 'Resource/img/star-on-big.png',</br/>
		       width:200</br/>
	        });</p>
		</div>
		
		<div>
		   <h2>有默认值的评星</h2>
		   <div id="valueStar"></div>
		   <p>
		   	$('#valueStar').raty({</br/>
		       starOff: 'Resource/img/star-off-big.png',</br/>
		       starOn: 'Resource/img/star-on-big.png',</br/>
		       width:200,</br/>
		       score:3
	        });</p>
		</div>
		
		<div>
		   <h2>有动态默认值的评星</h2>
		   <div id="dynamicValueStar" data-score='2'></div>
		   <p>
		   	$('#dynamicValueStar').raty({</br/>
		       starOff: 'Resource/img/star-off-big.png',</br/>
		       starOn: 'Resource/img/star-on-big.png',</br/>
		       width:200,</br/>
		       score:function(){</br/>
		       	return $(this).attr('data-score');</br/>
		       }</br/>
	        });</p>
		</div>
		
		<div>
		   <h2>改变星星的个数</h2>
		   <div id="changeStarNo" data-score='2'></div>
		   <p>
		   	$('#changeStarNo').raty({</br/>
		       starOff: 'Resource/img/star-off-big.png',</br/>
		       starOn: 'Resource/img/star-on-big.png',</br/>
		       width:200,</br/>
		       score:function(){</br/>
		       	return $(this).attr('data-score');</br/>
		       },</br/>
		       number:9</br/>
	        });</p>
		</div>
		
		<div>
		   <h2>ReadOnly星级显示</h2>
		   <div id="starReadyOnly" data-score='2'></div>
		   <p>
		   	$('#starReadyOnly').raty({</br/>
		       starOff: 'Resource/img/star-off-big.png',</br/>
		       starOn: 'Resource/img/star-on-big.png',</br/>
		       width:200,</br/>
		       readOnly:true
	        });</p>
		</div>
		
		<div>
		   <h2>半颗星显示</h2>
		   <div id="halfStar"></div>
		   <p>
		   	$('#starReadyOnly').raty({</br/>
		       starOff: 'Resource/img/star-off-big.png',</br/>
		       starOn: 'Resource/img/star-on-big.png',</br/>
		       width:200,</br/>
		       readOnly:true,
		       score:3.65
	        });</p>
		</div>
		
		<div id="out">
		   <h2>星星点击事件</h2>
		   <div id="starClick"></div>
		   <p>
		   	$('#starClick').raty({</br/>
		       starOff: 'Resource/img/star-off-big.png',</br/>
		       starOn: 'Resource/img/star-on-big.png',</br/>
		       width:200,</br/>
		       readOnly:true,
		       score:3.65,
		       click:function(score, event){
		       	   alert("id："+$(this).attr("id")+"\n值："+score+"\n事件："+event.type);
		       }
	        });</p>
		</div>
		
		<div id="test">
			
			
		</div>
	</body>

</html>
<script type="text/javascript">
	$('#star').raty({
		starOff: 'Resource/img/star-off-big.png',
		starOn: 'Resource/img/star-on-big.png',
		width:200
	});
	
	$('#valueStar').raty({
		starOff: 'Resource/img/star-off-big.png',
		starOn: 'Resource/img/star-on-big.png',
		width:200,
		score:3
	});
	
	$('#dynamicValueStar').raty({
		starOff: 'Resource/img/star-off-big.png',
		starOn: 'Resource/img/star-on-big.png',
		width:200,
		score:function(){
		   return $(this).attr('data-score');
		}
	});
	
	$('#changeStarNo').raty({
		starOff: 'Resource/img/star-off-big.png',
		starOn: 'Resource/img/star-on-big.png',
		width:300,
		score:function(){
		   return $(this).attr('data-score');
		},
		number:9
	});
	
	$('#starReadyOnly').raty({
		starOff: 'Resource/img/star-off-big.png',
		starOn: 'Resource/img/star-on-big.png',
		width:300,
		readOnly:true,
		score:3
	});
	
	$('#halfStar').raty({
		starOff: 'Resource/img/star-off-big.png',
		starOn: 'Resource/img/star-on-big.png',
		starHalf:'Resource/img/star-half-big.png',
		width:300,
		readOnly:true,
		score:3.66
	});
	
	$('#starClick').raty({
		starOff: 'Resource/img/star-off-big.png',
		starOn: 'Resource/img/star-on-big.png',
		starHalf:'Resource/img/star-half-big.png',
		width:300,
		score:3.66,
		click:function(score, event){
		   alert("id："+$(this).attr("id")+"\n值："+score+"\n事件："+event.type);
		}
	});
	
</script>

效果图如下所示：