Fully Configurable jQuery Rating Control Plugin - Rater

Rater is a simple yet highly customizable jQuery rating control plugin that features fractional star ratings, custom rating symbols, ajax handling, lots of configurations / API and much more.

How to use it:

1. Just download & include the jQuery Rater's script after jQuery library and we're ready to go.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="rater.js"></script>

2. Create a DIV placeholder for the rating control.

<div class="rate"></div>

3. If you want to set the max rating value:

<div class="rate" data-rate-value=6></div>

4. Initialize the rating control with default options:

$(".rate").rate();

5. Customize the rating symbols:

$(".rate").rate({
  symbols: {
    utf8_star: {
        base: '\u2606',
        hover: '\u2605',
        selected: '\u2605',
    },
    utf8_hexagon: {
        base: '\u2B21',
        hover: '\u2B22',
        selected: '\u2B22',
    },
    hearts: '♥',
    fontawesome_beer: '<i class="fa fa-beer"></i>',
    fontawesome_star: {
        base: '<i class="fa fa-star-o"></i>',
        hover: '<i class="fa fa-star"></i>',
        selected: '<i class="fa fa-star"></i>',
    },
    utf8_emoticons: {
        base: [0x1F625, 0x1F613, 0x1F612, 0x1F604],
        hover: [0x1F625, 0x1F613, 0x1F612, 0x1F604],
        selected: [0x1F625, 0x1F613, 0x1F612, 0x1F604],
    },
  },
  selected_symbol_type: 'utf8_star', // Must be a key from symbols
});

6. More configuration options with default values.

$(".rate").rate({
  max_value: 5,
  step_size: 0.5,
  initial_value: 0,
  convert_to_utf8: false,
  cursor: 'default',
  readonly: false,
  change_once: false, // Determines if the rating can only be set once
  only_select_one_symbol: false, // If set to true, only selects the hovered/selected symbol and nothing prior to it
  ajax_method: 'POST',
  additional_data: {}, // Additional data to send to the server
  //update_input_field_name = some input field set by the user
});

7. API methods:

$(".rating").rate("getValue");
$(".rating").rate("setValue");
$(".rating").rate("increment");
$(".rating").rate("decrement");
$(".rating").rate("getElement", layer_name, element_index);
$(".rating").rate("getLayers");
$(".rating").rate("setFace", value, face);
$(".rating").rate("removeFace", value);
$(".rate2").rate("setAdditionalData", {id: 42});
$(".rate2").rate("getAdditionalData");

8. Events.

$(".rating").on("change", function(ev, data){
console.log(data.from, data.to);
});

$(".rating").on("updateSuccess", function(ev, data){
  console.log("This is a custom success event");
});

$(".rating").on("updateError", function(ev, jxhr, msg, err){
  console.log("This is a custom error event");
});

8. Destroy & remove the rating control.

$(".rating").rate("destroy");
// or
$(".rating").remove();

---

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