gRating a Good jQuery Rating Plugin

I am writing a mobile app that has various ratings for different things (Friends, Ingredients, Recipies and so on). I was using jRating a jQuery plugin that was abandoned in 2012, I had to modify it a bit to get it to return values on the JavaScript side as well as a few other changes over the years. Eventually I decided it was getting a bit clunky (It used images which weren't optimised, very few comments and extremely hard to extend), I couldn't modify enough, so I starting looking for alternatives.

I ended up finding a very nice lightweight css and JavaScript implementation here but it wasn't at all ready to use, this got me thinking I might be able to roll my own solution with that as a base and address the features I needed most.

Hence gRating was born.

Solution

gRating is a light weight css jQuery and JavaScript only extendable plugin.

It can optionally use Font-Awesome for icons and Bootstrap Validator for validation it's only dependancy is jQuery v1.6+. It is fully customizable and mobile friendly.

It can be initialised at runtime or later in the lifecycle of the page, it requires minimal to no configuration depending on page styling and color schemes.

It has all of the features you need to use a rating system i.e. display a rating, get values back out, callbacks for changes and validation for ratings being mandatory.

Show me

Add a simple div and an optional initial rating value

<div class="rating" value="3"></div>

<script>
$(".rating").grating({
    ratingCss: {color: "#979a9a"},
    ratingHoverCss: {color: "#f4d03f"}
});
</script>

Generates the following gRating (The ratingCss & ratingHoverCss are needed as the background color of the blog isn't suited to the default coloring of the plugin)

This is the default behavior which is using an ASCII Star character ★, the code shown is exactly what was executed on the page.

What else can it do?

You can mouse over on a PC or touch on a mobile to see it's hover and click transitions

The ratings can be

• Disabled or enabled after initialisation or at initialisation
• Click/touch limits i.e. 3 clicks then disable the rating
• Validation i.e. the rating must have a value
• Css overrides for every value and part of the rating
• Font Awesome icons instead of a character
• A function instead of a character so you can inject dynamic text
• Support inline values that override global settings
• Deselectable ratings to remove values

What's next?

Like any successful project, it will now be abandoned and never updated until it becomes useless ;)

I will try and implement any feature that people need depending on suitability and time constraints, since I'm actively using the plugin myself I expect to update it over time as I need new features or thing of something extra it could do.

Gimme

The plugin is available on the Github releases page here, there is a full demo site here with many examples.

There is no CDN link yet, we are waiting until the project has more momentum at present.

I haven't listed the plugin in NPM yet.

Installation

Include the script tag on your page

<script src="js/jQuery-gRating.min.js" type="text/javascript"></script>

and start using gRating, there are more instructions on the demo site here as well as the Github readme here

Finally

Please rate this page if you liked it :)

This is my first full fledged jQuery plugin, if there are any suggestions on improvements or how to achieve the same goals easier I am happy to hear about it

Thanks!