murattcann / rater

A highly customizable rating widget that supports images, utf8 glyphs and other html elements!

rater

A highly customizable rating widget that supports images, utf8 glyphs and other html elements!

Simple usage

Depends on jQuery

// Options
var options = {
    max_value: 10,
    step_size: 0.5,
    initial_value: 0,
    selected_symbol_type: 'utf8_star', // Must be a key from symbols
    cursor: 'default',
    readonly: false,
    change_once: false, // Determines if the rating can only be set once
    ajax_method: 'POST',
    url: 'http://localhost/test.php',
    additional_data: {} // Additional data to send to the server
}

$(".rating").rate(options);

The data-rate-value attribute is optional. The value will fallback to the initial value in the settings and to 0 if not provided.

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

Useful 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);

// Set additional information to be sent with the ajax request
$(".rate2").rate("setAdditionalData", {id: 42});
$(".rate2").rate("getAdditionalData");

Useful events

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

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

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

Deleting

$(".rating").rate("destroy");
$(".rating").remove(); //This will remove the elements from the DOM