While working to show star rating we prefer to use plugin whether we need just need to show rating on our website.When we use plugin we are fourse to use external reference of javascript which increase our resource count and as a result it downs our website performance by few miliseconds(Depends on your net connection).Also it is very hard to customize even a small things and we got most other function and events which we don\’t use on our website. Some of us try to ignore it by using images but it result very large number of image for every no.Here I am just providing small snippet to overcome this issue and Hope it will help you as it helps me.
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Star rating Examples</title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div class="star-container" data-star="3.3" data-count="10"></div>
<!-- data-star will contain the star ratting data-count will contain the total number of stars -->
</body>
</html>
JavaScript Code
<script type="text/javascript">
$(function(){
if($(".star-container").length > 0 ){
var star = $(".star-container");
console.log(star.length);
for(var j =0; j< star.length; j++){
var starRate = $(star[j]).attr("data-star").split("."),starTotal = $(star[j]).attr("data-count");
console.log(starRate);
if(parseInt($(star[j]).attr("data-star")) < parseInt(starTotal)){
starBind(starRate,$(star[j]),starTotal);
}else{
alert("Ratting should less then start total Count");
}
}
}
function starBind(starCount,obj,starTotal){
starTotal = parseInt(starTotal);
var starRate = '<span class="star-blk"><span class="star"></span><span class="star-sel"></span></span>';
var creStar ="",starNum=0;
for(var j = 0; j < starCount.length; j++){
if(j===0){
for(var i=0; i< starCount[j]; i++){
starNum += 1;
creStar += starRate;
}
}else{
if(starCount[j] != 0){
starNum += 1;
creStar += '<span class="star-blk"><span class="star"></span><span class="star-sel" style="width: '+ starCount[j] + '0%;"></span></span>';
}
}
}
for(var k=0; k < (starTotal- starNum); k++){
creStar += '<span class="star-blk"><span class="star"></span></span>';
}
$(obj).append(creStar);
}
});
</script>
CSS Code
<style>
.star-container{display:inline-block; border:solid 1px #fff; height:14px;}
.star-blk{width:15px; height:14px; margin-right:3px; display:inline-block; position:relative;}
.star,.star-sel{background:url("star.png") #ccc; position:absolute; top:0; left:0; width:100%; height:14px;}
.star-sel{background-color:#cc0000;}
</style>
To see it Live Click here