Demo

Usage

Prerequisites

FontAwesome: include FontAwesome (>= 4.x) (tip: use the CDN hosted version)

jQuery: include jQuery (1.x or 2.x) before including the plugin source

CDN hosted version for jqAwesomeStarRating plugin (minimized, gzipped)

 

HTML

Just one line of HTML. The plugin will generate the 'stars' as <i> elements and will generate a hidden input field (to be used in forms). You can specify the name of the input field (see below the data-name attribute)

<div class="star-rating"></div>

Using data attributes

Use data-name to set the hidden input field name.

Use data-score to set a default value for the rating (i.e. how many stars). Value between 1 and 5.

<div class="star-rating" data-name="rating" data-score="3"></div>

 

CSS (customize away!)

Use the i selector to style the size and width of the stars.

Use the .fa-star to set color for active stars and .fa-star-o for not-active (empty) stars.

.star-rating i {
  margin-right: 0.2em;
  font-size: 16px;
  cursor: pointer;
}

.star-rating .fa-star,
.star-rating .fa-star-half-o {
  color: #f8a000;
}

.star-rating .fa-star-o {
  color: #cccccc;
}

 

Javascript

Call after DOM ready: $('.selector').awesomeStarRating(options)

Options

name: the name of the hidden input field generated (not needed if data-name is used)

score: default number of stars selected (similar effect as data-score)

onChange: event callback function with one argument representing the selected/current rating (value between 1..5)

jQuery(function () {
        $('.star-rating').awesomeStarRating({
            onChange: function (score) {
                if(score > 3) {
                    alert('Awesome! You give it ' + score + ' stars!');
                } else if ( score > 1 ) {
                    alert('You give it ' + score + ' stars. That\'s ok :-)');
                } else {
                    alert('Oh... just one star? Really?');
                }
            }
        });
    });

Download & profit!

github.com/rcugut/jqAwesomeStarRating

CDN hosted version for jqAwesomeStarRating plugin (minimized, gzipped)

Need help?

Check the issues section

 

Fork it and contribute!

License & Credits

Many thanks to the amazing projects FontAwesome and jQuery.

Licensed under MIT license.

Copyright (c) 2014 Radu Cugut / rcugut@gmail.com

Product of codenapse.com