Simple Star Rating Input Plugin - jQuery rating.js
File Size: | 12.4 KB |
---|---|
Views Total: | 1777 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A really simple and lightweight jQuery star rating plugin that stores the rating value in a hidden input field. The user can click on the stars to rate the product and see the value being updated.
How to use it:
1. Create an empty DIV container to hold the star rating system.
<div id="rating"></div>
2. Download and load the rating.js
script after jQuery.
<script src="/path/to/cdn/jquery.slim.min.js"></script> <script src="/path/to/rating.js"></script>
3. Initialize the plugin to generate a default star rating system.
rating.create({ 'selector': '#rating' });
4. It automatically adds the following HTML elements to the page.
<div id="rating"> <input type="hidden" name="rating" value="3"> <img src="selectedStar.svg" data-position="1"> <img src="selectedStar.svg" data-position="2"> <img src="selectedStar.svg" data-position="3"> <img src="unselectedStar.svg" data-position="4"> <img src="unselectedStar.svg" data-position="5"> </div>
5. Override the default rating symbols.
rating.create({ 'selector': '#rating', // use Font Awesome Icons 'unselectedIcon': 'fa fa-star-o red-font', 'selectedIcon': 'fa fa-star', });
6. Set the maximum number of stars. Default: 5.
rating.create({ 'selector': '#rating', 'outOf': 10, });
7. Set the initial rating value. Default: 3.
rating.create({ 'selector': '#rating', 'defaultRating': 4, });
8. Set the name of the hidden input. Default: 'rating'.
rating.create({ 'selector': '#rating', 'name': 'my-name', });
9. Add extra CSS classes to the stars. Default: null.
rating.create({ 'selector': '#rating', 'ratingClass': 'class-1 class-2', });
This awesome jQuery plugin is developed by DrRoach. For more Advanced Usages, please check the demo page or visit the official website.