Star Rating jQuery plugin for Bootstrap

Jan 26, 2015 | Bootstrap, UI/UX Designs & Layout, Utilities & Plug-ins | 0 comments

Star Rating jQuery plugin for Bootstrap

Star Rating Screenshot
//

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

  1. Convert any HTML input to a star rating control.
  2. 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.
  3. 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.
  4. 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.
  5. Specifically uses Bootstrap 3.x styles & glyphs. Can be combined to work better for Bootstrap styled projects (or input group addons).
  6. Ability to clear values and options for the stars. Control where the clear button element can be shown.
  7. Reset star rating to the initial value when the form is reset.
  8. 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.
  9. 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.
  10. Support for RIGHT TO LEFT (RTL) input. Automatically changes star styling for RTL.
  11. Triggers JQuery events for advanced development. Events currently available are rating.change, rating.clear, and rating.reset.
  12. Disabled and readonly input star rating support.
  13. Change stars and caption on mouse hover (new feature since v3.0.0).
  14. Change stars and caption on slide and drag for mobile/touch devices (new feature since v3.1.0).

Browser Support

If you are using the HTML5 NUMBER input to initialize the rating, please read this. The number field does not accept decimals in Google Chrome. The input is allowed, but when the user submits the form, they get an error message and are instructed to enter a valid number (whole numbers only). Other browsers like Firefox allow decimals on the number fields. Till this is standardized across browsers, the workaround for this is to use a normal text input, and initialize the rating via javascript.

 

DEMO: http://plugins.krajee.com/star-rating/demo

SOURCE: https://github.com/kartik-v/bootstrap-star-rating

 

Thanks,
NabeelShahid.com

 

 

Special thanks to http://plugins.krajee.com/ 

 

Submit a Comment

Your email address will not be published. Required fields are marked *