Small Flexible Rating System With jQuery - ratingbox.js

Small Flexible Rating System With jQuery - ratingbox.js
File Size: 7.17 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

ratingbox.js is a simple, lightweight, flexible jQuery star rating plugin used for rating products, images, software, users on your webpage.

Key features:

  • Uses Font Awesome for rating symbols.
  • Fractional rating support.
  • Custom click event handler.
  • Has support to surround the hidden input element for FORM usage.
  • Ajax enabled.
  • Allows to set value programmatically.

Basic usage:

1. Import the JavaScript file jQuery ratingbox.js after jQuery library.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="ratingbox.js"></script>

2. Create a basic rating control in read only mode.

<div id="rating1" class="ratingbox"></div>
$('#rating1').ratingBox({
  value: 3
});

3. Display the text value on the right side.

<div id="rating2" class="ratingbox"></div>
$('#rating2').ratingBox({
  value: 3,
  displayValue: true
});

4. Pass the options to the rating control via data attributes:

<div id="rating3" 
     class="ratingbox" 
     data-value="2.5" 
     data-display-value="true"
     >
</div>
$('#rating3').ratingBox();

5. Allow user input its rate:

<div id="rating4" class="ratingbox"></div>
$('#rating4').ratingBox({
  mode: 'rating'
});

6. Custom click event handler:

<div id="rating5" class="ratingbox"></div>
$('#rating5').ratingBox({
  mode: 'rating',
  displayValue: true,
  onClick: function () {
    alert($(this).data('value'));
  }
});

7. Surround the hidden input element for FORM usage:

<form action="mypage.php" method="post">
  <div id="rating6" class="ratingbox">
    <input type="hidden" name="rating" />
  </div>
</form>
$('#rating6').ratingBox({
  mode: 'rating',
  displayValue: true,
});

8. Send the rating values via AJAX.

<div id="rating7" class="ratingbox"></div>
$('#rating7').ratingBox({
  mode: 'rating',
  displayValue: true,
  onClick: function () {
      var rating = $(this).data('value');
      $.ajax({
          type: 'POST',
          url: 'mypage.php',
          data: {
              rating: rating
          }
      })
      .done(function () {
          alert('success');
      })
      .fail(function () {
          alert('an error has occurred');
      });
  }
});

9. Setting value programmatically.

<div id="rating8" class="ratingbox"></div>
$('#rating8').ratingBox({
  mode: 'rating',
  displayValue: true,
});
$('#btn').on('click', function () {
  $('#rating8').ratingBox('setValue', 4);
  return false;
});

10. Reference.

option type data-* accept default
value Float data-value from 0 to 5 0
mode String data-mode 'display' or 'rating' display
size Int32 data-size from 1 to 5 1
displayValue Boolean data-display-value true or false false

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