Rater.js

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

Simple usage

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

//or for example
var options = {
    max_value: 6,
    step_size: 0.5,
}
$(".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>

Custom symbols can be added through the symbol object in the settings. UTF8, UTF32 and basically any image or HTML element should work. Here are a few examples:

    
options = {
    symbols = {
        utf8_star: {
            base: '\u2606',
            hover: '\u2605',
            selected: '\u2605',
        },
        utf8_hexagon: {
            base: '\u2B21',
            hover: '\u2B22',
            selected: '\u2B22',
        },
        hearts: '♥',
        fontawesome_star: {
            base: '',
            hover: '',
            selected: '',
        },
        utf32_emoticons: {
            base: [0x1F625, 0x1F613, 0x1F612, 0x1F604],
            hover: [0x1F625, 0x1F613, 0x1F612, 0x1F604],
            selected: [0x1F625, 0x1F613, 0x1F612, 0x1F604],
        }
    },
    selected_symbol_type: 'utf32_emoticons',
    convert_to_utf8: true
}
    

*Make sure to set convert_to_utf8 to true for UTF32 characters

The full list of options

    
// Options
options = {
    max_value: 5,
    step_size: 0.5,
    initial_value: 0,
    symbols: {},
    selected_symbol_type: 'utf8_star', // Must be a key from symbols
    convert_to_utf8: false,
    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
    only_select_one_symbol: false, // If set to true, only selects the hovered/selected symbol and nothing prior to it
    //update_input_field_name = some input field set by the user
};

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

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

$(".rating").on("afterChange", 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
    

Examples

There are many examples in the "index.html" file in the repository