JQuery Star Rating [closed]

by

I’ve packaged a star rating plugin for meteor, so I’ve evaluated all the 11 jQuery rating plugins listed here, and the winner is, by far, RateIt.

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.

Minified size: 4.35KB (1.55KB when gzipped).

Tested on: IE6-10, Chrome 7-22, Firefox 3.6-16, Opera 10.63-12 – using jQuery 1.6.2 – 1.8.2. Touch support test on iPad iOS 4.2.1-5

RateIt can optionally use the HTML5 range input element – perfect for this purpose. No lame <li> elements or radio buttons.

The others are clearly lesser solutions:

Star Rating, the first answer

  • 78 open issues
  • on Google Code, not on GitHub, which means little to no pull requests
  • latest update 7 months ago

Raty, the second answer

  • somewhat slow development check the issues tab)
  • no mention of browser compatibility or touch support
  • has test suite

https://github.com/ripter/jquery.rating

  • only 22 commits
  • no touch support, browser compatibility listing or anything
  • raty is clearly better

Anyway, none of these mentions browser compatibility or touch support. RateIt does, and it also explains clearly why it’s better and different from the others:

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.

Oh, and the last update? Yesterday.

More Related Contents:

  1. How to get id from url?
  2. How to get a table cell value using jQuery?
  3. jQuery disable a link
  4. What is fastest children() or find() in jQuery?
  5. val() doesn’t trigger change() in jQuery
  6. How to add a list item to an existing unordered list
  7. Find out whether radio button is checked with JQuery?
  8. How to add pause between each iteration of jQuery .each()?
  9. JQuery ui – date picker, disabling specific dates
  10. Twitter Bootstrap Use collapse.js on table cells [Almost Done]
  11. Unobtrusive validation in Chrome won’t validate with dd/mm/yyyy
  12. What CSS3 selectors does jQuery really support, e.g. :nth-last-child()?
  13. Is there a way to disable initial sorting for jquery DataTables?
  14. jQuery UI autocomplete with JSON
  15. How do you stop Chrome and Opera sorting JSON objects by Index ASC?
  16. Remember which tab was active after refresh
  17. How can i get jqgrid frozen columns to work with word wrap on
  18. Distinguish Chrome from Safari using jQuery.browser
  19. trigger an event when contenteditable is changed
  20. Jquery datepicker – only day and month
  21. Get attribute name value of
  22. JQuery AJAX Consume SOAP Web Service [closed]
  23. Call external JS file based on “media screen” value
  24. Validation of radio button group using jQuery validation plugin
  25. jquery .slideToggle() horizontal alternative?
  26. jQuery UI Resizable alsoResize reverse
  27. How to select specific form element in jQuery?
  28. Edit datatable in shiny with dropdown selection (for DT v0.19)
  29. My Own Like Button: Django + Ajax — How?
  30. Getting Zend_Navigation menu to work with jQuery’s Fisheye

Leave a Comment