Small Flexible Rating System With jQuery - ratingbox.js

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.