Pages



Recent Posts


Welcome to IT Care Load More

Monday, 19 January 2015

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.

 
       
Read More
Subscribe
Labels
Popular Posts

Subscribe Via Email

Declaimer

We always host & upload file and data which is available on any popular sites available for anyone or search engines. If you have any problem with file, links or other content on this site contact us via Email All objectionable Contents will be removed from this site.



Search

Loading...

Follow by Email

Follow me

© IT Care All rights reserved | Designed By Gopal Joshi