rateYo - A simple and flexible star rating plugin

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

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

normalFill: string, default: #808080 

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

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

ratedFill: string, default: #F39C12 

The background color for the rated part of a star

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

numStars: number, default: 5

Number of stars to use, to display the rating

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

minValue: number, default: 0

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

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

maxValue: number, default: 5

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

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

Precision: number, default: 1

The precision of rating.

$(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.

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

readOnly: boolean, default: false

Set readOnly: true, if you want the rating to be non-editable

$(function () {
  $("#rateYo").rateYo({
    rating: 3.2,
    readOnly: true
  });
});

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.

$(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.

$(function () {
  $("#rateYo").rateYo({
    onChange: function (rating, rateYoInstance) {
      $(this).next().text(rating);
    }
  });
});

5. METHODS

All methods follow a common signature.

A method of the plugin can be called by passing the name of the method as the first parameter

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

$(function () {
  var $rateYo = $("#rateYo").rateYo({
      ratedFill: getColor()
  }.rateYo("option", "onChange", function () {
    /* get all options of the plugin */
    var options = $rateYo.rateYo("option");

    /* get color according to rating */
    $rateYo.rateYo("option", "ratedFill", getColor(options));
  }).rateYo("option", "onSet", function () {

    /* get all options of the plugin */
    var options = $rateYo.rateYo("option");

    /* set rating and color */
    $rateYo.rateYo("option", "ratedFill", getColor(options));
  });
});

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

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

6. EVENTS

$(function () {

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

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

/* javascript */

$(function () {

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

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