Small Custom Star Rating Plugin For jQuery - Stars.js
File Size: | 7.04 KB |
---|---|
Views Total: | 3479 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Stars.js is a jQuery plugin for generating a star rating system that allows any icon fonts, variable star sizes, colors and init values.
Basic usage:
1. Load a icon font of your choice in the document. By default, the plugin uses Font Awesome 4 for star symbols.
<link rel="stylesheet" href="/path/to/font-awesome.min.css"> <!-- Or use Bootstrap's Glyphicons --> <link rel="stylesheet" href="/path/to/bootstrap.min.css">
2. Create an empty container for the star rating system.
<div class="basic"> </div>
3. Load jQuery library and the jQuery star.js plugin at the end of the document.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="stars.js"></script>
4. Generate a basic rating system inside the container you just created and use Font Awesome icons for star symbols.
$(".basic").stars();
5. Use Bootstrap's Glyphicons for star symbols.
$(".basic").stars({ emptyIcon: 'glyphicon glyphicon-star-empty', filledIcon: 'glyphicon glyphicon-star' });
6. All default options which can be used to customize the rating system.
$(".basic").stars({ // how many stars to display stars: 5, // custom star icons emptyIcon: 'fa-star-o', filledIcon: 'fa-star', // star color color: '#E4AD22', // init value value: 0, // Array of strings, tooltips for each star text: null, // callback function click: function() {} });
This awesome jQuery plugin is developed by viniciusmichelutti. For more Advanced Usages, please check the demo page or visit the official website.