A repository of over 1000 quality jQuery plugins

jQuery rateit.js

rateit.js is a jQuery Rate & Vote plugin.

Created by gjunge

Rating plugin for jQuery. Fast, Progressive enhancement, touch support, customizable (just swap out the images, or change some CSS), Unobtrusive JavaScript (using HTML5 data-* attributes), RTL support, supports as many stars as you’d like, and also any step size.

Not what you're looking for? Click here to view more Rate & Vote jQuery plugins

RateIt

Rating plugin for jQuery.

npm version NuGet Bower version

Quick start

Several quick start options are available:

  • Download the latest release.
  • Clone the repo: git clone https://github.com/gjunge/rateit.js.git.
  • Install with Bower: bower install jquery.rateit.
  • Install with npm: npm install jquery.rateit.
  • Install with NuGet: Install-Package jQuery.RateIt.

Read the Wiki documentation or look at the examples page.

About

Fast, Progressive enhancement, touch support, customizable (just swap out the images, or change some CSS), Unobtrusive JavaScript (using HTML5 data-* attributes), RTL support, supports as many stars as you'd like, and also any step size.

Your feedback is more than welcome!

Why is RateIt different

Although it does the same job as the rest of the jQuery star rating plugins, the main difference is its simplicity. Most plugins create an element for each (partial) star, be it a div with a star background, or an img tag. Each of these tags gets a hover event, and a click event. And on these hover/click events it has to go and talk to the other stars, telling them to change their state.

So each star plugin does a lot of DOM alterations (adding the number of stars as elements), and adds lots of events (again the number of stars times 2).

RateIt uses basically three divs. One background (the inactive state), and two divs on top (the hover, and selected state). In addition it only attaches three event handlers (not counting the use of the reset button aside). Each of these divs has a x-repeating background, enabling as many stars as you want (or a big image with for example 5 different smilies one next to the other) without adding more elements or event handlers. Based on the position of the mouse, or the selected value, a certain width is applied to the selection div or the hover div.

Credits



You might also like these other Rate & Vote jQuery Plugins

  • jQuery-Rate

    A simple jQuery plugin for creating graphical ratings

  • jQuery Ratemate

    Star ratings for HTML5 meter element, input[type='range'] and input[type='number'] using Raphaƫl

  • Angular Rateit

    This directive was inspired by the jQuery (star)rating plugin RateIt. However this package will work without jQuery.