evolutionStarRating jQuery Plugin

jQuery.fn.evolutionStarRating

This plugin supports rendering a rating value as stars, along with allowing the user to select a new rating.

Usage

$('SELECTOR').evolutionStarRating(options)

where 'SELECTOR' is a span.

Options

• value: (number) initial value to render
  • default 0
• maxRating: (number) number of stars to render
  • default 5
• imagesPathUrl: (string) path to star images with a trailing slash.
• useHalfStars: (bool) whether or not to support halves
  • default false
• starClass: class to apply to stars
  • default 'rating'
• overClass: css class to apply to a star when mouse is over it
  • default 'active'
• readOnlyClass: css class to apply to a star it is read-only
  • default 'readonly'
• titles: array of string titles to use for stars
  • default ['Terrible','Poor','Fair','Average','Good','Excellent']
• isReadOnly: (bool) read only status
• allowMultipleSelections: (bool) whether to allow multiple selections
• starElement: (string) type of element to render default: img
• onRate: (function) callback function when a selection is made. is passed selected value.

Methods

val

Returns (and sets if passed a second optional value) the current value of the rating

// get the value
var value = $('SELECTOR').evolutionStarRating('val');

// set the value
$('SELECTOR').evolutionStarRating('val', .5);

readOnly

Returns (and/or sets if passed a second optional Boolean value) the read-only state of the control

// get the readonly status
$('SELECTOR').evolutionStarRating('readOnly')

// set the readonly status
$('SELECTOR').evolutionStarRating('readOnly', true)

Example

Given the following span to contain a rating control:

<span id="ratingControl" title="Rated Good [4 out of 5]."></span>

The following will initialize a star rating control, using defaults for most options

var ratingControl = $('#ratingControl');
ratingControl.evolutionStarRating({
    value: 4,  //  initial value of rating
    isReadOnly: false,
    onRate: function(value) {
        alert(value + ' selected!');

        // Temporarily disable editing of rating during saving
        ratingControl.evolutionStarRating('readOnly', true);

        // ...perform AJAX-based saving of rating here...

        // After a successful save, turn off the read-only state of the control
        ratingControl.evolutionStarRating('readOnly', false);
    }
});