Bootstrap star rating

Bootstrap star rating is a simple yet powerful JQuery star rating plugin for Bootstrap which supports advanced features like fractional star fill and RTL input support. Developed with a focus on utlizing pure CSS-3 styling to render the control. The plugin uses Bootstrap markup and styling by default, but it can be overridden with any other CSS markup.

Features

• Convert any HTML input to a star rating control.
• The plugin automatically converts an input to a star rating control if you set its class = rating. All options to the input can be passed as HTML5 data attributes.
• You can use the HTML 5 number input for polyfill and the plugin will automatically use the number attributes like min, max, and step. However, number inputs have a problem with decimal values on the Chrome Browser. Read the Browser Support section below.
• Involves pure CSS3 styling of the stars. Say goodbye to image sprites or playing with image backgrounds. Offers clean scalable vector icons for consistent display across devices. Optionally one can use the Unicode character set to override symbols.
• Render and display fractional star ratings. Configure number of stars, min, max, step, and theoretically support any fractional rating.
• Uses Bootstrap 3.x styles & glyphs by default. But this can be overridden with plugin parameters and your own CSS styles.
• Support for RIGHT TO LEFT (RTL) input. Automatically changes star styling for RTL.
• Ability to clear values and options for the stars. Control where the clear button element can be shown.
• Reset star rating to the initial value when the form is reset.
• Ability to control and display caption of the selected stars. Each rated star can have its own caption. Control where the caption element can be shown.
• Ability to size the rating control including the stars, caption, and clear button. Five prebuilt size templates are available xl, lg, md, sm, and xs.
• Triggers JQuery events for advanced development. Events currently available are rating.change,rating.clear, and rating.reset.
• Disabled and readonly input star rating support.
• Size of the entire plugin is less than 11KB (about 8KB for the minified JS and 3KB for the minified CSS).

Source: plugins.krajee.com

1. INCLUDE CSS AND JS FILES

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
<link href="path/to/css/star-rating.min.css" media="all" rel="stylesheet" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="path/to/js/star-rating.min.js" type="text/javascript"></script>

2. HTML

<input id="input-id" type="number" class="rating" min=0 max=5 step=0.5 data-size="lg" >

3. JAVASCRIPT

// with plugin options
$("#input-id").rating({'size':'lg'});

4. OPTIONS

The plugin supports these following options:

stars: int number of stars to display. Defaults to 5.

glyphicon: boolean whether to use the glyphicon star symbol. Defaults to true. If set to false, will use the unicode black star symbol.

symbol: string any custom star symbol or unicode character to display. This will override the glyphicon settings above.

min: float the minimum value for the rating input. Defaults to 1.

max: float the maximum value for the rating input. Defaults to 5.

step: float the step to increment the star rating. Defaults to 0.5.

disabled: boolean whether the input is disabled. Defaults to false.

readonly: boolean whether the input is read only. Defaults to false.

rtl: boolean whether the rating input is to be oriented RIGHT TO LEFT. Defaults to false.

showClear: boolean whether the clear button is to be displayed. Defaults to true.

showCaption: boolean whether the rating caption is to be displayed. Defaults to true.

size: string size of the rating control. One of xl, lg, md, sm, or xs. Defaults to md.

defaultCaption: string the default caption text, which will be displayed when no caption is setup for the rating in thestarCaptions array. This variable defaults to {rating} Stars, where the variable {rating} will be replaced with the selected star rating.

starCaptions: array the caption titles corresponding to each of the star rating selected. Defaults to

{
    0.5: 'Half Star',
    1: 'One Star',
    1.5: 'One & Half Star',
    2: 'Two Stars',
    2.5: 'Two & Half Stars',
    3: 'Three Stars',
    3.5: 'Three & Half Stars',
    4: 'Four Stars',
    4.5: 'Four & Half Stars',
    5: 'Five Stars'
}

starCaptionClasses: array the caption css classes corresponding to each of the star rating selected. Defaults to

{
    0.5: 'label label-danger',
    1: 'label label-danger',
    1.5: 'label label-warning',
    2: 'label label-warning',
    2.5: 'label label-info',
    3: 'label label-info',
    3.5: 'label label-primary',
    4: 'label label-primary',
    4.5: 'label label-success',
    5: 'label label-success'
}

clearButton: string the markup for displaying the clear button. Defaults to <i class="glyphicon glyphicon-minus-sign"></i>.

clearButtonTitle: string the title displayed on clear button hover. Defaults to Clear.

clearButtonBaseClass: string the base CSS class for the clear button. Defaults to clear-rating.

clearButtonActiveClass: string the CSS class for the clear button that will be appended to the base class above when button is hovered/activated. Defaults to clear-rating-active.

clearValue: string the value to clear the input to, when the clear button is clicked. Defaults to 0.

clearCaption: string the caption displayed when clear button is clicked. Defaults to Not Rated.

clearCaptionClass: string the CSS Class to apply to the caption displayed, when clear button is clicked. Defaults to label label-default.

captionElement: string the identifier for the container element selector for displaying the caption. Defaults to the div container with .caption class inside the rating control.

clearElement: string the identifier for the container element selector for displaying the clear button. Defaults to the divcontainer with .clear-rating class inside the rating control.

5. EVENTS

The plugin supports these events:

rating.change: This event is triggered when the star rating is modified or changed. This event also allows you to access these parameters:

• value: the selected rating value
• caption: the caption for the selected rating

Example:

$('#input-id').on('rating.change', function(event, value, caption) {
    console.log(value);
    console.log(caption);
});

rating.clear: This event is triggered when the rating is cleared with the clear button.

Example:

$('#input-id').on('rating.clear', function(event) {
    console.log("rating.clear");
});

rating.reset

This event is triggered when the rating is reset to initial value.

Example:

$('#input-id').on('rating.reset', function(event) {
    console.log("rating.reset");
});

$('#input-id').rating('update', 3);

// Example: Call the method below in rating.change event to disable the rating and
// hide the clear button.
$('#input-id').rating('refresh', {disabled: true, showClear: false, showCaption: true});

$('#input-id').rating('reset');

$('#input-id').rating('clear');