Minimal HTML List Based Star Rating Plugin - jQuery StarRating
File Size: | 4.16 KB |
---|---|
Views Total: | 3132 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
StarRating is a really small and cross-browser jQuery rating system plugin which converts a standard HTML unordered list into a star rating control using Font Awesome for rating symbols.
How to use it:
1. Load the Font Awesome Iconic Font in the html file.
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
2. Create an empty HTML unordered list on the page.
<ul id="starRating"></ul>
3. Load jQuery library and the jQuery StarRating plugin:
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"> </script> <script src="jquery.starrating.js"></script>
4. Initialize the star rating control.
$('#starRating').starRating()
5. The primary CSS styles for the star rating control.
ul { list-style: none; padding: 0; } li { display: inline-block; font-size: 40px; color: #ccc; cursor: pointer; } li.active, li.hover { color: orange; } ul.hover li.active:not(.hover) { color: #ccc }
6. Set the amount of rating stars.
<ul id="starRating" data-stars="10"> </ul>
7. Set the current amount of rating stars.
<ul id="starRating" data-current="2"> </ul>
8. Execute a callback function after rating.
$('#starRating').starRating({ callback: function (value) {} })
This awesome jQuery plugin is developed by vulcandigital. For more Advanced Usages, please check the demo page or visit the official website.