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
   
Simple Customizable jQuery Rating Plugin - score.js

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.