jQuery RatingStars

A simple but powerful jQuery plugin for rating stars.

Informations

you can design the entire UI yourself (CSS and Icons).

Getting Started

see the examples in the examples-directory.

jQuery options

var ratingOptions = {
    selectors: {
        starsSelector: '.rating-stars',                 // the main container
        starSelector: '.rating-star',                   // the container for a single star
        starActiveClass: 'is--active',                  // the css-class for the active stars
        starHoverClass: 'is--hover',                    // the css-class for the hover stars
        starNoHoverClass: 'is--no-hover',               // the css class for the other stars (only in the hover effect)
        targetFormElementSelector: '.rating-value'      // the selector for the input
    }
};

default html template

<div class="rating-stars block" id="another-rating">
    <input type="hidden" class="rating-value" name="stars-value" id="stars-value" value="2">
    <!-- set the input-value to set the default value -->
    <div class="rating-stars-container">
        <div class="rating-star">
            <i class="fa fa-star"></i>
        </div>
        <div class="rating-star">
            <i class="fa fa-star"></i>
        </div>
        <div class="rating-star">
            <i class="fa fa-star"></i>
        </div>
        <div class="rating-star">
            <i class="fa fa-star"></i>
        </div>
        <div class="rating-star">
            <i class="fa fa-star"></i>
        </div>
    </div>
</div>

events

you can listen on some events to work with the plugin

ratingChanged

this event is triggered if the user select a star (click or touch on a star)

$(".rating-stars").ratingStars(ratingOptions);

$(".rating-stars").on("ratingChanged", function (ev, data) {
    // dome something
});

data is an object like this:

{
    ratingValue: 4
}

ratingOnEnter

this event is triggered if the user hovers a star

$(".rating-stars").ratingStars(ratingOptions);

$(".rating-stars").on("ratingOnEnter", function (ev, data) {
    // dome something
});

data is an object like this:

{
    ratingValue: 4
}

ratingOnLeave

this event is triggered if the user leaves a star

$(".rating-stars").ratingStars(ratingOptions);

$(".rating-stars").on("ratingOnLeave", function (ev, data) {
    // dome something
});

data is an object like this:

{
    ratingValue: 4
}