5 star
rating System using PHP and JQuery is used to rate different products or
services on any web page in best user interactive way. User can rate content on
scale of 1-5 star without reloading page. We just take an example of scan 1-5
otherwise by configuring JQuery scale can be change.
In this
Example we have used Raty.JS plugin for interactive stars.
STEP-1
Create simple
html file as shown below
<!DOCTYPE
html>
<html
lang="en" dir="ltr">
<head>
<script
type="text/javascript">
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script
type="text/javascript"
src="http://testweb3.iecworld.com/jsdemo/js/lq_js_point/js/jquery.raty.min.js"></script>
// Initialise Plugin
$(document).ready(function(){
$('.stars').raty({
score: function() {
return $(this).attr('data-score');
}
});
});
</script>
</head>
<body>
<b>Star
Rating Demo</b>
<div
class=”stars”></div>
</body>
</html>
That’s it. Our
stars will look something like
First of all
we have created a simple HTML Document and have included Jquery and Raty JS.
Below code
used to initialize Raty for star rating functionality.
$(document).ready(function(){
$('.stars').raty({
score: function() {
return $(this).attr('data-score');
}
});
});
Here is more
default options customize star rating which you can use during initialization.
-
Star
rating with read only value
$('.stars').raty({
readOnly: true
});
readOnly: true
});
- Number
of Stars for rating
$('.stars').raty({
start: 2
});
});
- Onclick
functionality
$('.stars').raty({
onClick:
function(score) { alert('Your Score: ' + score); }
});
- Default
cancel button
$('.stars').raty({
showCancel:
true
});
- Displaying
Half Stars
$('.stars').raty({
showHalf: true
});
User can also get value of selected stars and maintain
value in database by using onclick event. Saty Stars are user friendly and
supported by almost all browsers (Firefox, Google Chrome, Safari, Ipad, Iphone,
Android Phone etc.).
