Rate Yo!

RateYo! is a tiny and flexible jQuery star rating plugin, it uses SVG to render rating, so no images required.

just create a <div/>, throw some styles, initialize and thats it!.

Hover to change the rating and Click to set.

              <-- HTML -->
              <div id="rateYo"></div>
            
              /* Javascript */

              //Make sure that the dom is ready
              $(function () {

                $("#rateYo").rateYo({
                  rating: 3.6
                });

              });

Options

starWidth:string, default: 18px

The width of each star, the width of a star is always equal to its height

                    <-- HTML -->
                    <div id="rateYo"></div>
                  
                    /* Javascript */

                    $(function () {

                      $("#rateYo").rateYo({
                        starWidth: "40px"
                      });

                    });

normalFill: string, default: #808080

The background color for the un-rated part of a star

                    <-- HTML -->
                    <div id="rateYo"></div>
                  
                    /* Javascript */

                    $(function () {

                      $("#rateYo").rateYo({
                        normalFill: "#A0A0A0"
                      });

                    });

ratedFill: string, default: #F39C12

The background color for the rated part of a star

                    <-- HTML -->
                    <div id="rateYo"></div>
                  
                    /* Javascript */

                    $(function () {

                      $("#rateYo").rateYo({
                        ratedFill: "#E74C3C"
                      });

                    });

numStars: number, default: 5

Number of stars to use, to display the rating

                    <-- HTML -->
                    <div id="rateYo"></div>
                  
                    /* Javascript */

                    $(function () {

                      $("#rateYo").rateYo({
                        numStars: 10
                      });

                    });

minValue: number, default: 0

The Minimum value, you want the rating to start with.

                    <-- HTML -->
                    <div id="rateYo"></div>
                  
                    /* Javascript */

                    $(function () {

                      $("#rateYo").rateYo({
                        minValue: 1
                      });

                    });

maxValue: number, default: 5

The Maximum value, you want the rating to end with.

                    <-- HTML -->
                    <div id="rateYo"></div>
                  
                    /* Javascript */

                    $(function () {

                      $("#rateYo").rateYo({
                        maxValue: 1,
                        numStars: 1,
                        starWidth: "40px"
                      });
                    });

Precision: number, default: 1

The precision of rating.

                    <-- HTML -->
                    <div id="rateYo"></div>
                  
                    /* Javascript */

                    $(function () {

                      $("#rateYo").rateYo({
                        precision: 2,
                      });
                    });

rating: number/string, default: 0

The rating can be given in either percentage or number,
it should be given in a string, if it is a percentage.

                    <-- HTML -->
                    <div id="rateYo"></div>
                  
                    /* Javascript */

                    $(function () {

                      $("#rateYo").rateYo({
                        rating: "50%",
                        precision: 0
                      });
                    });

onSet: function, default: null

This function is called whenever the rating is set,
It is called after initialization, as the rating would be set for the first time.

Params:
This function will be called with two parameters,
1)rating: the number representing rating,
2)rateYoInstance: an instance of the plugin containing some public functions

Context:
The context( this ) of the function will be set to the HTML element on which the plugin is initialized. 

                    <-- HTML -->
                    <div id="rateYo"></div>
                  
                    /* Javascript */

                    $(function () {

                      $("#rateYo").rateYo({

                        onSet: function (rating, rateYoInstance) {

                          alert("Rating is set to: " + rating);
                        }
                      });
                    });

onChange: function, default: null

This function is called whenever the rating is changed (not set),

The Params and Context for the function would be exactly same as that of onSet callback. 

                    <-- HTML -->
                    <div id="rateYo"></div>
                    <div class="counter"></div>
                  
                    /* Javascript */

                    $(function () {

                      $("#rateYo").rateYo({

                        onChange: function (rating, rateYoInstance) {

                          $(this).next().text(rating);
                        }
                      });
                    });

Methods

All methods follow a common signature.

A method of the plugin can be called by passing the string "method" as the first parameter,
name of the method as second parameter, followed by arguments to the method.

If no arguments are passed after the method name, it is considered as a getter, else it is considered as a setter

rating:

 
                    <!-- HTML -->
                    <div id="rateYo"></div>
                    <div>
                      <button id="getRating" >Get Rating</button>
                      <button id="setRating" >Set Random Rating</button>
                    </div>
                  
                    /* Javascript */

                    $(function () {

                      var $rateYo = $("#rateYo").rateYo();

                      $("#getRating").click(function () {

                        /* get rating */
                        var rating = $rateYo.rateYo("method", "rating");

                        window.alert("Its " + rating + " Yo!");
                      });

                      $("#setRating").click(function () {

                        /* set rating */
                        var rating = getRandomRating();
                        $rateYo.rateYo("method", "rating", rating);
                      });
                    });

destroy:

 
                    <!-- HTML -->
                    <div id="rateYo"></div>
                    <div>
                      <button id="destroy">Destroy</button>
                      <button id="initialize">Initialize</button>
                    </div>
                  
                    /* Javascript */

                    $(function () {

                      var $rateYo = $("#rateYo").rateYo();

                      $("#destroy").click(function () {

                        $rateYo.rateYo("method", "destroy");
                      });

                      $("#initialize").click(function () {

                        $rateYo.rateYo();
                      });
                    });

Events

rateyo.set

This event shall be fired when ever the rating is set.

This new rating shall be passed in the second parameter to the event handler

                    <!-- HTML -->
                    <div id="rateYo"></div>
                  
                    /* javascript */

                    $(function () {

                      $("#rateYo").rateYo()
                                  .on("rateyo.set", function (e, data) {

                                      alert("The rating is set to " + data.rating + "!");
                                  });
                    });

rateyo.change

This event will be fired when ever the rating is change.

This new rating shall be passed in the second parameter to the event handler

                    <!-- HTML -->
                    <div id="rateYo"></div>
                  
                    /* javascript */

                    $(function () {

                      $("#rateYo").rateYo()
                                  .on("rateyo.change", function (e, data) {

                                    var rating = data.rating;
                                    $(this).next().text(rating);
                                  });
                    });