Google Material Rating Plugin With jQuery - star.rating.js
File Size: | 10.3 KB |
---|---|
Views Total: | 2329 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Just another jQuery plugin used to generate a simple star rating control using Google's Material Icons. The plugin automatically converts any DIV element into a hidden input for the rating control.
How to use it:
1. Load the Google Material Icons from a CDN:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
2. You can also import the Google Material Icons like this:
@font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v7/2fcrYFNaTjcS6g4U3t-Y5UEw0lE80llgEseQY3FEmqw.woff2) format('woff2'), url(https://fonts.gstatic.com/s/materialicons/v7/2fcrYFNaTjcS6g4U3t-Y5RV6cRhDpPC5P4GCEJpqGoc.woff) format('woff'); }
3. Create a DIV element for the star rating control.
<div class="rating"></div>
4. Load jQuery library and the jquery.star.rating.js
in the webpage when needed.
<script src="//code.jquery.com/jquery-3.1.0.slim.min.js"></script> <script src="jquery.star.rating.js"></script>
5. Call the function on the DIV element to render a basic star rating control on the webpage.
$('.rating').addRating();
6. Set the maximum number of stars you want to use.
$('.rating').addRating({ max: 5 });
7. Specify the attributes for the hidden input field.
$('.rating').addRating({ fieldName : 'rating', fieldId : 'rating', });
8. Use the other icons instead of the default star icon.
$('.rating').addRating({ icon : 'star' });
This awesome jQuery plugin is developed by acv629. For more Advanced Usages, please check the demo page or visit the official website.