Minimal Rating Plugin with jQuery and Font Awesome - Rate Picker

Minimal Rating Plugin with jQuery and Font Awesome - Rate Picker
File Size: 11.3 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Rate Picker is a jQuery plugin for help you inserting a simple rating widget on your webpage.

Features:

  • Uses Font Awesome for rating symbols.
  • Custom number of rating symbols.
  • Custom colors and cursors.
  • Callback function.

How to use it:

1. Load the required Font Awesome 4 icon font in the head section of the html page.

<link rel="stylesheet" href="font-awesome.min.css">

2. Load the jQuery rate picker plugin in the html page which has jQuery library installed.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="js/jquery-rate-picker.js"></script>

3. Create an inline element for the rating widget and specify the initial value using data-stars attribute.

<span id="demo" data-stars="3"></span>

4. Call the function on the element and the data will be posted as <input type="hidden" name="demo" />.

$.ratePicker("#demo");

5. Execute a callback function after rating.

$.ratePicker("#demo", {
  rate : function (stars){
    alert('Rate is ' + stars);
  }
});

6. All configuration options.

$.ratePicker("#demo", {

  // maximum number of rating symbols
  max :5,

  // custom colors
  rgbOn:"#e74c3c",
  rgbOff:"#ecf0f1",
  rgbSelection:"#e74c3c",

  // custom cursor
  cursor:"crosshair",

  // custom rating symbol
  indicator:"fa-thumbs-up"

});

This awesome jQuery plugin is developed by malambane. For more Advanced Usages, please check the demo page or visit the official website.