WHAT'S NEW?
Loading...

How to create star Rating with raty



Star Rating



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
Star Rating Output




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
});


-        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.).

Visit http://wbotelhos.com/raty to download plugins, get more options and latest updates.

 
       

0 comments:

Post a Comment