gRating example page

This page shows how to implement and use the gRating jQuery plugin for good ratings

Each example below shows a different feature or ability of the plugin

This page uses the following APIs that arent requirements of the gRating plugin for layout, display and enhancement purposes, you can safely ignore them when replicating the rating settings

Font Awesome (This can enhance gRating but isn't required) Bootstrap 3 (This doesn't impact gRating and is not required) Bootstrap Validator (This can help validate gRatings in forms but isn't required)

Note: All ratings are embeded in Bootstrap "well well-sm" and text-center"s to better show the detail but this is omitted from the code displayed since it isn't related or neccasary for the plugin

Releases: The latest releases are available from the projects Github page https://github.com/duindain/gRating/releases

Issues: If you encounter an issue please submit it on GitHub https://github.com/duindain/gRating/issues

Help: To discuss or get help please visit the blog post about gRating http://lazinator.com/Articles/Duindain-gRating.php

Example 1: <div class="rating"></div>
  • Rating with no inline configuration
Example 2: <div class="rating" value="3"></div>
  • Rating with a starting value of 3
Example 3: <div class="rating" value="2" data-character="O"></div>
  • Rating with a starting value of 2
  • A character value of O
Example 4: <div class="rating" value="4" data-character="fa-thermometer-three-quarters"></div>
Example 5: <div class="rating" value="1" disabled></div>
  • Rating with a starting value of 1
  • A state of disabled
Example 6: <div class="rating" value="4" data-max="7"></div>
  • Rating with a starting value of 4
  • An element count of 7
Example 7: <div class="rating" value="2" data-clicklimit="2"></div>
  • Rating with a starting value of 2
  • A clicklimit of 2
Example 8: <div class="rating" value="1" data-deselectable="false"></div>
  • Rating with a starting value of 1
  • Rating with deselectable set to false
Example 9: <div id="idForOnClickEvent"></div>
  • Rating with no inline configuration
  • =
Example 10: <div id="ratingWithCallback" value="3"></div>
  • Rating with a starting value of 3
  • A callback echoing the latest rating here
Example 11: <div id="simpleRatingWithValidation" required></div>
  • Rating with required flag
  • Validation with jQuery validation form is
Example 12: <div id="anotherRatingWithValidation" data-error="What's with this fish in my gullet!" required></div>
  • Validation with custom error message
  • Validation with jQuery validation form is
Example 13: <div class="customCss" value="3"></div>
  • Rating with normal Css overrides
  • New Css properties injected
Example 15: <div class="spriteSheets" data-character="" value="2"></div>
  • SpriteSheet instead of a character
Example 16: <div class="dynamicCharacter"></div>
  • Runtime Dynamic character insertion
  • Counting from 5 to 1
Example 17: <div class="dynamicAwesome" value="5"></div>
  • Runtime Dynamic Font Awesome Characters
Submitting ratings to a server

<div class="rateThisPage" data-character="fa-diamond" data-max="10"></div>

<script>
$(".rateThisPage").grating({
  callback: function(owner, value)
  {
    $.getJSON("index.php", {pageRating: value}, function(data)
    {
      $(".ratingAlertResult").html(''+
      '<div class="alert alert-success alert-dismissible" role="alert">'+
      '  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>'+
      '  <strong>Success</strong> Thanks for submitting your rating!'+
      '</div>').fadeTo(2000, 500).slideUp(500, function()
      {
          $('.ratingAlertResult').slideUp(500);
      });;
    });
  },
  ratingCss: {color: "#48C14A"},
  ratingHoverCss: {color: "#7187DA"}
});
</script>