logo
Rating

jQuery Bar Rating Plugin works by transforming a standard select field into a rating widget. The rating widget can be flexibly styled with CSS. Demo page.

Usage

To use the plugin, you need to add the following files.

<!-- Javascript -->
<script src="libs/rating/jquery.rating.min.js"></script>

Basic Usage

<div class="rating-example" data-rating="3.5"></div>

Running with javascript:

$(".rating-example").starRating({
    initialRating: 3.5
});

Rounded Star Shape

$(".rating-example").starRating({
    initialRating: 3.5,
    starShape: 'rounded',
});

Use Gradients

$(".rating-example").starRating({
    initialRating: 3.5,
    useGradient: false,
});

Read Only Mode

$(".rating-example").starRating({
    initialRating: 3.5,
    readOnly: true,
});

Use Fullstars

$(".rating-example").starRating({
    initialRating: 3,
    useFullStars: true,
});

On Hover Event

3.5
$(".rating-example-6").starRating({
    initialRating: 3.5,
    disableAfterRate: false,
    onHover: function(currentIndex, currentRating, $el){
        $('.live-rating').text(currentIndex);
    },
    onLeave: function(currentIndex, currentRating, $el){
        $('.live-rating').text(currentRating);
    }
});
On this page