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