c0debrain / stars-rating Goto Github PK

Stars rating control with two modes: fixed and mutable.

Mutable mode allows input from the user.

Among other features: colors cusomization and different star symbols.

See demo: stars-rating.meteor.com

In order to render markup with small font size use (or size='lg' for large):

{{> starsRating rating=4.5 size='sm'}}

You also can set exact font size in pixels by:

{{> starsRating rating=4.5 size=10}}

if you want user to iteract with the control and set a rating use:

{{> starsRating id='rating' mutable=true}}

To access saved value, get element by ID and then:

var rating = $('#rating').data('userrating');

For colors customization, add your own CSS class:

{{> starsRating id='rating' class='mystar' mutable=true}}

and follow snippet:

# Changes default color.
.mystar .current-rating {
  color: #color1;
}

# A color that highlights selected stars when user interacts with the control.
.mystar .active {
  color: #color2;
}

It's possible to set a different star symbol.

For example, add Awesome font package and CSS class setting font family:

.awesome {
  font-family: FontAwesome;
}

then configure a star symbol in the template:

{{> starsRating id='rating' star='\\f005' class='awesome' mutable=true}}

You will see rating with Awesome stars.

Tested: IE9+, Firefox35+, Chrome40+

There are one event and one method supported via jQuery API.

To subscribe on the star value changes use $('#rating').on('change', ...).

To reset a star do $('#rating').trigger('reset').