Fully Configurable jQuery Rating Control Plugin Rater - Download Fully Configurable jQuery Rating Control Plugin - Rater

Download Fully Configurable jQuery Rating Control Plugin – Rater

By Posted on

This time I will share jQuery Plugin and tutorial about Fully Configurable jQuery Rating Control Plugin – Rater, hope it will help you in programming stack.

Fully Configurable jQuery Rating Control Plugin Rater - Download Fully Configurable jQuery Rating Control Plugin - Rater
File Size: 47.7 KB
Views Total: 1989
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

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.

view source
1 <script src="//code.jquery.com/jquery.min.js"></script>
2 <script src="rater.js"></script>

2. Create a DIV placeholder for the rating control.

view source
1 <div class="rate"></div>

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

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

4. Initialize the rating control with default options:

view source
1 $(".rate").rate();

5. Customize the rating symbols:

view source
01 $(".rate").rate({
02   symbols: {
03     utf8_star: {
04         base: 'u2606',
05         hover: 'u2605',
06         selected: 'u2605',
07     },
08     utf8_hexagon: {
09         base: 'u2B21',
10         hover: 'u2B22',
11         selected: 'u2B22',
12     },
13     hearts: '&hearts;',
14     fontawesome_beer: '<i class="fa fa-beer"></i>',
15     fontawesome_star: {
16         base: '<i class="fa fa-star-o"></i>',
17         hover: '<i class="fa fa-star"></i>',
18         selected: '<i class="fa fa-star"></i>',
19     },
20     utf8_emoticons: {
21         base: [0x1F625, 0x1F613, 0x1F612, 0x1F604],
22         hover: [0x1F625, 0x1F613, 0x1F612, 0x1F604],
23         selected: [0x1F625, 0x1F613, 0x1F612, 0x1F604],
24     },
25   },
26   selected_symbol_type: 'utf8_star', // Must be a key from symbols
27 });

6. More configuration options with default values.

view source
01 $(".rate").rate({
02   max_value: 5,
03   step_size: 0.5,
04   initial_value: 0,
05   convert_to_utf8: false,
06   cursor: 'default',
07   readonly: false,
08   change_once: false, // Determines if the rating can only be set once
09   only_select_one_symbol: false, // If set to true, only selects the hovered/selected symbol and nothing prior to it
10   ajax_method: 'POST',
11   additional_data: {}, // Additional data to send to the server
12   //up<a href="https://www.jqueryscript.net/time-clock/">date</a>_input_field_name = some input field set by the user
13 });

7. API methods:

view source
01 $(".rating").rate("getValue");
02 $(".rating").rate("setValue");
03 $(".rating").rate("increment");
04 $(".rating").rate("decrement");
05 $(".rating").rate("getElement", layer_name, element_index);
06 $(".rating").rate("getLayers");
07 $(".rating").rate("setFace", value, face);
08 $(".rating").rate("removeFace", value);
09 $(".rate2").rate("setAdditionalData", {id: 42});
10 $(".rate2").rate("getAdditionalData");

8. Events.

view source
01 $(".rating").on("change", function(ev, data){
02 console.log(data.from, data.to);
03 });
04  
05 $(".rating").on("updateSuccess", function(ev, data){
06   console.log("This is a custom success event");
07 });
08  
09 $(".rating").on("updateError", function(ev, jxhr, msg, err){
10   console.log("This is a custom error event");
11 });

8. Destroy & remove the rating control.

view source
1 $(".rating").rate("destroy");
2 // or
3 $(".rating").remove();

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

source : jqueryscript.net

Related posts: