Now days rating system is common in every website. Star rating looks good on website, Instead of just showing percentage or number on website.
In old website, Developer use input radio buttons for star, that doesn’t looks good. But now most of the developer use third party (very large plugins) to create star rating system UI better.
Those plugins either needs to be customized as per need or change the html as per that design. That waste lots of time.
Today I’ll show you to create very simple star rating plugin using jquery and simple HTML
First of all Write down HTML for star rating using normal radio buttons. Like below
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>MakeItstar Plugin Example</title> </head> <body> <form name="star" method="post" action=""> <div class="rating"> <label> How you rate this website ?</label> <div class="stars stars-wrapper"> <input type="radio" name="star" id="star1" value="1" /> <input type="radio" name="star" id="star2" value="2" /> <input type="radio" name="star" id="star3" value="3" /> <input type="radio" name="star" id="star4" value="4" /> <input type="radio" name="star" id="star5" value="5" /> </div> </div> </form> </body> </html> |
If you will see output it will look like this
After that include jquery on website on top of javascripts and write following plugin code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script type="text/javascript">// <![CDATA[ jQuery(document).ready(function(){ jQuery(".stars-wrapper").makeItStar(); }); (function($){ $.fn.makeItStar=function(){ this.each(function(){ var str=''; $(this).find("input[type=radio]").each(function(){ $(this).hide(); str+='<a rel="'+$(this).attr("id")+'" href="javascript:;"></a>'; }); str=" <div class='rating-box makeItStar'>"+str+"</div> "; $(this).append(str); $(this).find(".rating-box").children("a").hover(function(){ $(this).closest(".rating-box").find("a").removeClass("active"); var idx=$(this).index(); for(i=0;i<=idx;i++){ $(this).closest(".rating-box").find("a:eq("+i+")").addClass("active"); } }); $(this).find(".rating-box").children("a").click(function(){ var cix=$(this).index(); $(this).closest(".rating-box").parent().find("input[type=radio]").removeAttr("checked"); $(this).closest(".rating-box").parent().find("input:eq("+cix+")").attr('checked', "checked"); }); $(this).find(".rating-box").mouseenter(function(){ }).mouseleave(function(){ $(this).find("a").removeClass("active"); var cidx=-1; $(this).parent("div").find("input").each(function(i){ if($(this).attr('checked')=="checked"){ cidx=i; } }); if(cidx>=0){ for(i=0;i<=cidx;i++){ $(this).closest(".rating-box").find("a:eq("+i+")").addClass("active"); } } }) }); } })(jQuery) // ]]></script> |
And than, you need to add small css code to looks it better
1 2 3 4 5 6 7 8 9 10 11 | .rating-box a { display: block; float: left; height: 16px; width: 16px; background: url("star-rating2.jpg") repeat-x scroll 0 0px transparent; } .rating-box a.active { background-position: 0 -20px; } |
After this your combined code will look like this
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>MakeItstar Plugin Example</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
<style type="text/css">
.rating-box a {
display: block;
float: left;
height: 16px;
width: 16px;
background: url("star-rating2.jpg") repeat-x scroll 0 0px transparent;
}
.rating-box a.active {
background-position: 0 -20px;
}
</style>
<script>
jQuery(document).ready(function(){
jQuery(".stars-wrapper").makeItStar();
});
(function($){
$.fn.makeItStar=function(){
this.each(function(){
var str='';
$(this).find("input[type=radio]").each(function(){
$(this).hide();
str+='<a rel="'+$(this).attr("id")+'" href="javascript:;"></a>';
});
str="<div class='rating-box makeItStar'>"+str+"</div>";
$(this).append(str);
$(this).find(".rating-box").children("a").hover(function(){
$(this).closest(".rating-box").find("a").removeClass("active");
var idx=$(this).index();
for(i=0;i<=idx;i++){
$(this).closest(".rating-box").find("a:eq("+i+")").addClass("active");
}
});
$(this).find(".rating-box").children("a").click(function(){
var cix=$(this).index();
$(this).closest(".rating-box").parent().find("input[type=radio]").removeAttr("checked");
$(this).closest(".rating-box").parent().find("input:eq("+cix+")").attr('checked', "checked");
});
$(this).find(".rating-box").mouseenter(function(){
}).mouseleave(function(){
$(this).find("a").removeClass("active");
var cidx=-1;
$(this).parent("div").find("input").each(function(i){
if($(this).attr('checked')=="checked"){
cidx=i;
}
});
if(cidx>=0){
for(i=0;i<=cidx;i++){
$(this).closest(".rating-box").find("a:eq("+i+")").addClass("active");
}
}
})
});
}
})(jQuery)
</script>
</head>
<body>
<form name="star" method="post" action="">
<div class="rating">
<label> How you rate this website ?</label>
<div class="stars stars-wrapper">
<input type="radio" name="star" id="star1" value="1" />
<input type="radio" name="star" id="star2" value="2" />
<input type="radio" name="star" id="star3" value="3" />
<input type="radio" name="star" id="star4" value="4" />
<input type="radio" name="star" id="star5" value="5" />
</div>
</div>
</form>
</body>
</html> |
When you run this program you will get output like this
To see demo and download working example click below