Simple Customizable jQuery Rating Plugin - score.js
| File Size: | 16.6 KB |
|---|---|
| Views Total: | 2539 |
| 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.











