No description, website, or topics provided.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist/js
examples
LICENSE
README.md

README.md

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
}