Simple Customizable jQuery Rating Plugin - score.js
File Size: | 16.6 KB |
---|---|
Views Total: | 2522 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
score.js is a simple, fully customizable jQuery star rating plugin that uses unicode entity or Font Awesome Icon Font for rating symbols.
Features:
- Generates a star rating control form html lists or span elements.
- Allows for any number of rating stars.
- Vertical and horizontal layouts.
- Custom sizes and colors.
- Callback functions.
- Simple to use and cross browser.
Basic usage:
1. Load jQuery library and the jQuery score.js plugin's JS & CSS files in the html page.
<link rel="stylesheet" href="css/jQuery.score.css"> <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="js/jQuery.score.js"></script>
2. Load the Font Awesome 4 if you want to use Font Awesome icons for rating symbols.
<link rel="stylesheet" href="font-awesome.min.css">
3. Create a DIV container (or an html unordered list) for the star rating control.
<div class="demo-default"></div> <!-- Or --> <ul class="demo-default"></ul>
4. Initialize the plugin and done.
$('.demo-default').score();
5. Plugin's default options.
$('.demo-default').score({ // score range number : 5, // symbol size size : 26, // symbole color color : 'black', // initila score score : undefined, // vertical layout vertical : false, // replace default hints // e.g. ['bad', 'poor', 'regular', 'good', 'gorgeous'] hints : undefined, // executed on click. click : undefined, // executed on mouseover. mouseover : undefined, // executed on mouseout. mouseout : undefined, // read only mode readOnly : false, // uses font awesome icons fontAwesome : false, // debug mode debug : false });
5. Plugin API.
// set a score $('.score').score('score', score); // get a score $('.score').score('score'); // remove current score $('.score').score('cancel'); // destroy the plugin $('.score').score('destroy');
This awesome jQuery plugin is developed by haozki. For more Advanced Usages, please check the demo page or visit the official website.