Options

starWidth: string, default: 18px The width of each star, the width of a star is always equal to its height.You can set this option using data-rateyo-star-width attribute <-- HTML --> <div id="rateYo"></div> /* Javascript */ $(function () { $("#rateYo").rateYo({ starWidth: "40px" }); }); Get or set the 'starWidth' option after initialization // Getter var starWidth = $("#rateYo").rateYo("option", "starWidth"); //returns 40px // Setter $("#rateYo").rateYo("option", "starWidth", "40px"); //returns a jQuery Element

normalFill: string, default: #808080 The background color for the un-rated part of a star.You can set this option using data-rateyo-normal-fill attribute <-- HTML --> <div id="rateYo"></div> /* Javascript */ $(function () { $("#rateYo").rateYo({ normalFill: "#A0A0A0" }); }); Get or set the 'normalFill' option after initialization // Getter var normalFill = $("#rateYo").rateYo("option", "normalFill"); //returns "#A0A0A0" // Setter $("#rateYo").rateYo("option", "normalFill", "#B0B0B0"); //returns a jQuery Element

ratedFill: string, default: #F39C12 The color for the rated part of a star.You can set this option using data-rateyo-rated-fill attribute NOTE: This option will not work when This option will not work when multiColor option is set. <-- HTML --> <div id="rateYo"></div> /* Javascript */ $(function () { $("#rateYo").rateYo({ ratedFill: "#E74C3C" }); }); Get or set the 'ratedFill' option after initialization // Getter var ratedFill = $("#rateYo").rateYo("option", "ratedFill"); //returns "#E74C3C" // Setter $("#rateYo").rateYo("option", "ratedFill", "#E74C3C"); //returns a jQuery Element

multiColor: Boolean or Object, default: false , you can set this option using data-rateyo-multi-color="true" attribute, only boolean value is accepted in the data-* attribute This option helps in changeing the color of the rating, as the rating value changes( Multi Color ). For the trasition of color with the rating, we need two colors, the color when rating is lowest ( startColor ) and the color when rating is highest ( endColor ) If you specify true as the value, the startColor would be #c0392b and the endColor would be #f1c40f ( Default colors ) You can override the default start and end colors by specifying an Object as follows {"multiColor": {"startColor": "#FF0000", "endColor": "#00FF00"}} NOTE: The `startColor` and `endColor` should be only hex values like "#FF0000" not like "red" <-- HTML --> <div id="rateYo"></div> /* Javascript */ $(function () { $("#rateYo").rateYo({ rating : 1.6, spacing : "5px", multiColor: { "startColor": "#FF0000", //RED "endColor" : "#00FF00" //GREEN } }); }); Get or set the 'multiColor' option after initialization // Getter var ratedFill = $("#rateYo").rateYo("option", "multiColor"); //returns `Object` // Setter $("#rateYo").rateYo("option", "multiColor", false); // disables multi color rating and returns a jQuery Element

numStars: number, default: 5 Number of stars to use, to display the rating.You can set this option using data-rateyo-num-stars attribute <-- HTML --> <div id="rateYo"></div> /* Javascript */ $(function () { $("#rateYo").rateYo({ numStars: 10 }); }); Get or set the 'numStars' option after initialization // Getter var numStars = $("#rateYo").rateYo("option", "numStars"); //returns 10 // Setter $("#rateYo").rateYo("option", "numStars", 10); //returns a jQuery Element

maxValue: number, default: 5 The Maximum value, you want the rating to end with. You can set this option using data-rateyo-max-value attribute <-- HTML --> <div id="rateYo"></div> /* Javascript */ $(function () { $("#rateYo").rateYo({ maxValue: 1, numStars: 1, starWidth: "40px" }); }); Get or set the 'maxValue' option after initialization // Getter var maxValue = $("#rateYo").rateYo("option", "maxValue"); //returns 1 // Setter $("#rateYo").rateYo("option", "maxValue", 1); //returns a jQuery Element

Precision: number, default: 1 The precision of rating.You can set this option using data-rateyo-precision attribute <-- HTML --> <div id="rateYo"></div> /* Javascript */ $(function () { $("#rateYo").rateYo({ precision: 2, }); }); Get or set the 'precision' option after initialization // Getter var normalFill = $("#rateYo").rateYo("option", "precision"); //returns 2 // Setter $("#rateYo").rateYo("option", "precision", 3); //returns a jQuery Element

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. You can set this option using data-rateyo-rating attribute <-- HTML --> <div id="rateYo"></div> /* Javascript */ $(function () { $("#rateYo").rateYo({ rating: "50%", precision: 0 }); }); Get or set the 'rating' option after initialization // Getter var normalFill = $("#rateYo").rateYo("option", "rating"); //returns 50 // Setter $("#rateYo").rateYo("option", "rating", 5); //returns a jQuery Element

halfStar: boolean, default: false When set to true , rating will be displayed in the steps of 0.5 . You can set this option using data-rateyo-half-star="true" attribute <-- HTML --> <div id="rateYo"></div> /* Javascript */ $(function () { $("#rateYo").rateYo({ rating: 1.5, halfStar: true }); }); Get or set the 'halfStar' option after initialization // Getter var normalFill = $("#rateYo").rateYo("option", "halfStar"); //returns true // Setter $("#rateYo").rateYo("option", "halfStar", true); //returns a jQuery Element

fullStar: boolean, default: false When set to true , rating will be displayed in the steps of 1 .You can set this option using data-rateyo-full-star="true" attribute <-- HTML --> <div id="rateYo"></div> /* Javascript */ $(function () { $("#rateYo").rateYo({ rating: 2, fullStar: true }); }); Get or set the 'fullStar' option after initialization // Getter var normalFill = $("#rateYo").rateYo("option", "fullStar"); //returns true // Setter $("#rateYo").rateYo("option", "fullStar", true); //returns a jQuery Element

readOnly: boolean, default: false Set readOnly: true , if you want the rating to be non-editable.You can set this option using data-rateyo-read-only="true" attribute <-- HTML --> <div id="rateYo"></div> /* Javascript */ $(function () { $("#rateYo").rateYo({ rating: 3.2, readOnly: true }); }); Get or set the 'readOnly' option after initialization // Getter var readOnly = $("#rateYo").rateYo("option", "readOnly"); //returns true // Setter $("#rateYo").rateYo("option", "readOnly", false); //returns a jQuery Element

spacing: string, default: "0px" The amount of space between stars in pixels. You can set this option using data-rateyo-spacing attribute <-- HTML --> <div id="rateYo"></div> /* Javascript */ $(function () { $("#rateYo").rateYo({ rating: 3.2, spacing: "10px" }); }); Get or set the 'spacing' option after initialization // Getter var readOnly = $("#rateYo").rateYo("option", "spacing"); //returns 10px // Setter $("#rateYo").rateYo("option", "spacing", "5px"); //returns a jQuery Element

rtl ( Right to Left ) : Boolean, default: false Render the rating Right to Left. You can set this option using data-rateyo-rtl attribute <-- HTML --> <div id="rateYo"></div> /* Javascript */ $(function () { $("#rateYo").rateYo({ rating: 3.2, rtl: true }); }); Get or set the 'rtl' option after initialization // Getter var currentRTL = $("#rateYo").rateYo("option", "rtl"); //returns false by default // Setter $("#rateYo").rateYo("option", "rtl", true); //returns a jQuery Element

onInit: function, default: null This function is called when the rating is rendered in the UI 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({ onInit: function (rating, rateYoInstance) { console.log("RateYo initialized! with " + rating); } }); });

onSet: function, default: null This function is called whenever the rating is set. 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); } }); }); Get or set the 'onSet' option after initialization // Getter var onSet = $("#rateYo").rateYo("option", "onSet"); //returns the function // Setter $("#rateYo").rateYo("option", "onSet", function () { console.log("This is a new function"); }); //returns a jQuery Element