Animated Configurable Star Rating Plugin - jQuery gRating

gRating is a simple jQuery rating plugin which adds an animated, configurable star rating control with custom CSS styles to your posts, products, articles and more.

More features:

• Supports Font Awesome icon format as characters i.e. fa-ambulance will render <i class="fa fa-ambulance" aria-hidden="true"></i> in a span. This would require Font-Awesome css to be imported to your Html page to work.
• Supports Bootstrap Validator for form validation i.e. required will require a value be entered in the rating field.

How to use it:

1. Create a DIV element to place the star rating control. Yon can set the initial rating value in the value attribute.

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

2. Download the put the jQuery gRating plugin's script jQuery-gRating.js after jQuery.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jQuery-gRating.js"></script>

3. Call the rating plugin on the DIV element and done.

$(".rating").grating();

4. Optionally you can add a callback function as this:

$(".rating").grating({
  callback: function(owner, value)
  {
    console.log("Callback from "+owner.attr("id")+" with value "+value);
  }
});

5. You can assign the rating to a variable to use methods from the plugin:

var rating = $("#rating").grating();
rating.enable(true); rating.val();

6. You can get the value when unassigned by calling the plugin again:

$(".rating").GRating().val();

7. Properties available on html object (IMPORTANT: These override the default values, even if you pass in new defaults).

• data-max="int value": sets number of stars
• disabled: sets disabled to true
• value="int value": sets initial rating value
• data-character="a character": sets the character to use as the rating display
• data-clicklimit="a number": sets a limit to the number of clicks to be processed on the rating 0 indicates unlimited
• data-error="a string": Error text to show if validation is enabled
• data-deselectable="true|false": Enables or disables deselecting via clicking on the same rating value
• required: sets the required flag on the hidden input field

8. All possible configuration options.

$(".rating").grating({

  // Initial enabled or disabled state of the rating
  enabled: true,

  // Indicates whether to allow select the same rating value twice to toggle off the rating
  allowDeselect: true,

  // Default character to use i.e. ASCII Star, can be font-awesome fa codes i.e. fa-ambulance
  character: "★",

  // Allows switching the span type to another html element if needed
  elementType: "span",

  // How many rating objects to display
  elementCount: 5,

  // Whether to limit the number of clicks or not, a value of 0 enables no limit
  clicklimit: 0,

  // Initial rating value
  defaultValue: 0,

  // Whether validation is needed
  required: false,

  // Validation pattern for the Bootstrap Validator is added to the class of input if required is true
  validationClass: "form-control",

  // Overrude the default error message from the Bootstrap Validator
  validationText: "Rating is required",

  // Placeholder for callback function called onclick events for when a rating is changed
  callback: null,

  // Normal display settings for stars
  ratingCss: {
    fontSize: "30px",
    color: "#fff",// For dark pages
    opacity: ".5",
    cursor: "pointer",
    padding: "0 10px",
    transition: "all 150ms",
    display: "inline-block",
    transform: "rotateX(45deg)",
    transformOrigin: "center bottom",
    textShadow: "none"
  },

  // Hover settings for stars
  ratingHoverCss: {
    color: "#ff0",
    opacity: "1",
    transform: "rotateX(0deg)",
    textShadow: "0 0 30px #ffc"
  }
  
});

---

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