Speed up development with full-stack environments for every branch.

Learn More

How To Add 5 Star Rating Using JQuery

14167 Runs 39051 Views 9400 Copies
Saved

Saved

dipesh.parmar 55

dipesh.parmar
published 4 years ago

    <!DOCTYPE html>
    
    <html lang="en" dir="ltr">
    <head>
      <meta charset="utf-8">
    	<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    	<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
    
    	<title>How to add 5 star rating using jQuery</title>
    	<!--Adding basic stylesheet -->
    	<link type="text/css" rel="stylesheet" href="css/application.css">
    	
    	<!--Adding jQuery library -->
    	<script type="text/javascript" src="js/jquery.min.js"></script>
    	<!--Adding jQuery rating plug-in-->
    	<script type="text/javascript" src="lib/jquery.raty.min.js"></script>
      
    	<script type="text/javascript">
    		$(function()
    		{
    			/*
    				Basic Example with custom image path
    				path : indicate custom path to the star image
    			*/
    			$('#star').raty({ path: 'http://wbotelhos.com/raty/lib/img/' });
    			
    			
    			/*
    				Predefined score with half star,
    				score : You can pass any value for it, not necessarily,
    						a data- value.
    						You can use a rating-score too.
    						but then 
    						code will be return $(this).attr('rating-score');
    				half 	: that will enable user to add half star rating
    				target  : define the rating hint container
    				targetKeep : this will allow used to
    					keep selected result inside hint container
    					defining false will loose selected value
    			*/
    
    			$('#predefined-star').raty(
    			{
    				path: 'http://wbotelhos.com/raty/lib/img/',
    				half: true,
    				target: '#result',
    				targetKeep: true,
    				score: function()
    				{
    					return $(this).attr('data-score');
    				}
    			});
    		});
    	</script>
    
    </head>
    <body>
    	<div id="wrapper">
    		<div id="container">
    		
    			<!-- HTML Structure for basic rating -->
    			<h2>Basic</h2>
    			<div id="star"></div>
    			
    			<!-- With Predefined Rating -->
    			<h2>Predefined Score</h2>
    			<div id="predefined-star" data-score="2.5"></div> <div id="result" style="font-size: 15px !important;"></div>
    			
    		</div>
    	</div>
    </body>
    </html>
    Please login/signup to get access to the terminal.

    Your session has timed out.

    Dismiss (the page may not function properly).