Simple jQuery Star Rating System For Bootstrap 3/4

Simple jQuery Star Rating System For Bootstrap 3/4
File Size: 49.9 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Yet another jQuery star rating plugin that converts a number input to a star rating widget using Bootstrap 3 styles and glyphs. Touch devices is supported since version 3.0.

See also:

How to use it:

1. Include the Twitter Bootstrap 3's CSS file in the page.

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

2. Include the jQuery Bootstrap Star Rating plugin's javascript and CSS files after jQuery library.

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

3. Create a number input on the page. Use input's attributes to customize the star rating widget.

<input id="rating-system" type="number" class="rating" min="1" max="5" step="1">

4. Available options.

// assign a CSS class with the rating-<theme-name> to the rating container
// The default (blank) theme (for displaying bootstrap glyphicons)
// krajee-svg (for displaying svg icons)
// krajee-uni (for displaying unicode symbols as stars)
// krajee-fa (for displaying font awesome icons)
theme: '',

// enable the plugin to display messages for your locale (you must set the ISO code for the language).
language: 'en',

// number of stars to display
stars: 5,

// the symbol markup to display for a filled / highlighted star
filledStar: '<i class="glyphicon glyphicon-star"></i>',

// the symbol markup to display for an empty star
emptyStar: '<i class="glyphicon glyphicon-star-empty"></i>',

// the CSS class to be appended to the star rating container.
containerClass: '',

// whether the input is read only
displayOnly: false,

// whether the rating input is to be oriented RIGHT TO LEFT. 
rtl: false,

// size of the rating control
// xl, lg, md, sm, and xs
size: 'md',

// whether the clear button is to be displayed
showClear: true,

// whether the rating caption is to be displayed
showCaption: true,

// the caption titles corresponding to each of the star rating selected
starCaptionClasses: {
  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'
},

// the markup for displaying the clear button
clearButton: '<i class="glyphicon glyphicon-minus-sign"></i>',

// the base CSS class for the clear button
clearButtonBaseClass: 'clear-rating',

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

// the caption displayed when clear button is clicked
clearCaption: 'Not Rated',

// the CSS Class to apply to the caption displayed, when clear button is clicked
clearCaptionClass: 'label label-default',

// the value to clear the input to, when the clear button is clicked
clearValue: 0,

// the identifier for the container element selector for displaying the caption. 
captionElement: null,

// the identifier for the container element selector for displaying the clear button.
clearElement: null,

// whether hover functionality is enabled.
hoverEnabled: true,

// control whether the caption should dynamically change on mouse hover
hoverChangeCaption: true,

// control whether the stars should dynamically change on mouse hover
hoverChangeStars: true,

// whether to dynamically clear the rating on hovering the clear button
hoverOnClear: true

5. Methods.

// Update the rating by setting a value via javascript. 
// The method accepts a rating value as a parameter.
$('#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});

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

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

// Destroy the rating.
$('#input-id').rating('destroy');

// Re-creates the rating (after a destroy).
$('#input-id').rating('create');

Change logs:

v4.0.3 (2017-09-07)

  • Rename events to start with rating: instead of rating.
  • Enhancements to support Bootstrap v4.x framework.

v4.0.2 (2017-06-07)

  • Add French Translations.
  • Add Romanian Translations.
  • Add Spanish Translations.
  • Add Italian Translations.
  • Add License Headers.
  • Add Chinese Translations.
  • Better management of themes and locales.
  • Add Arabic Translations.
  • Add Polish Translations.
  • Do not refer to minified files in bower main metadata .
  • Enable scroll when rating is readonly or disabled.
  • Add ability to configure required attribute for input.
  • New property zeroAsNull to treat zero value rating as null.
  • Styling enhancements and code optimizations.
  • More correct form reset event listening.
  • Fix five stars translation

v4.0.1 (2016-02-29)

  • Correct documentation for refresh method.
  • Correct caption and clear rendering methods.
  • Correct caption setting when showCaption is false.
  • Revamp generation of rating via refresh method.
  • Implement method chaining and revamp private methods
  • enhance public methods like create, destroy, refresh, clear, reset to return the rating element jQuery object

v4.0.0 (2016-02-18)

  • Add SVG Icon Support
  • Add Theming Functionality.
  • Symbol, glyphicon, ratingClass properties will be removed. The requirement for the above will be replaced with the theme property (and can also be implemented using the containerClass property).
  • Stars now have a better padding and spacing that can be configured via CSS and themes
  • New property filledStar - will allow one to set the markup for filledStar
  • New property emptyStar - will allow one to set the markup for emptySta
  • Exclusive support for SVG (and a prebuilt krajee-svg theme that contains two different ready to use SVG icons).
  • Add display only capability.
  • Add support for bootstrap-sass official repo via sass branch.
  • Add animate property to enable / disable animation of star highlight on hover / change.

v3.5.8 (2016-02-05)

  • Add German Translations.
  • Add Portugese Brazilian Translations.
  • Rename reserved word used as variable.

v3.5.7 (2016-01-21)

  • Add Ukranian Translations.
  • Refactor code for listening events and deep extend options correctly.

v3.5.6 (2015-12-12)

  • Add Russian Translations
  • bugs fixed.

v3.5.5 (2015-11-18)

  • Fix Error: Cannot read property 'pageX' of undefined error on touch devices.

v3.5.4 (2015-09-20)

  • Remove String.prototype.replaceAll and implement regex replace.
  • Styling enhancements for printed output

v3.5.3 (2015-06-19)

  • Remove redundant tooltip title on hover of caption element
  • Fixes for composer.json dependencies.

v3.5.2 (2015-05-11)

  • More correct init of clear and caption elements.
  • Fixed: Validate on touchstart for devices that do not support click event.

v3.5.1 (2015-02-13)

  • Ability to integrate with other font icon CSS frameworks like Font Awesome.

v3.5.0 (2015-02-01)

  • Prevent invalid star rating for numStars > 5 with default value & hoverChange enabled.
  • Code cleanup and restructure for JS lint changes

v3.4.0 (2014-12-16)

  • Added destroy method to destroy the rating plugin.
  • Added create method to create the rating plugin (typically after a destroy).

v3.3.0 (2014-11-14)

  • Prevent invalid star ratings if cursor is close to left/right edge of star array.

2014-11-08

  • Upgrade to release v3.2.0

2014-10-31

  • Better rating refresh method.

2014-10-27

  • Add touch device support to enable touch and slide across stars.

2014-10-17

  • v3.0.0

2014-10-14

  • Add new configurable properties 
  • Add new events.
  • More correct minimum value and clear value validation through new getWidthFromValue method.

2014-08-23

  • Dynamic configuration for starCaptions and starCaptionClasses using a function.

2014-05-29

  • Change to entire plugin code to eliminate dependency of HTML5 input. Plugin size reduced to 8KB minified.
  • Uses special JQuery routines to trigger star rating changes.
  • Plugin support is now extended to all browsers including pre IE10
  • Plugin support is now extended to all Touch based and mobile devices like iOS, Android.
  • Removed cloning of inputs to allow better refreshing of input across ajax and other scenarios.
  • Caption and Clear elements parameters treated as identifiers rather than JQuery object elements.

2014-05-17

  • Correct refresh rating.

2014-05-08

  • Correct cloning and conversion of field to a range slider input.

2014-05-08

  • Prevent rating duplication when init by css class

2014-04-30

  • Glyphicon star styling corrections

2014-04-26

  • Revamp of entire plugin code. Cleverly leverages CSS3 styles, animations, and HTML5 input features to render the plugin.
  • Render and display fractional star ratings. Configure number of stars, min, max, step, and theoretically support any fractional rating.
  • Right to left (RTL) support enhancement. Optimally uses the dir attribute of the range input.
  • Bootstrap style is made optional and configurable. Can override CSS to use any style.
  • Any star symbol (unicode or icon font) can be embedded instead of Glyphicon.
  • Uses HTML 5 range input to change ratings. Polyfills for range input in case JQuery/Javascript is disabled.
  • Automatically degrades to a normal SELECT dropdown input for browsers that do not support HTML 5 range input.

2014-04-04

  • Widget is customizable for using any CSS markup to override Bootstrap styles.
  • Clear button class customization added.

2014-03-25

  • Upgraded to v1.1.0

2014-03-24

  • Fixed: Disabled/Readonly parsing on refresh.

2014-03-19

  • Coding style updates

2014-03-13

  • Fixed init for min, max, and step

This awesome jQuery plugin is developed by kartik-v. For more Advanced Usages, please check the demo page or visit the official website.