jQuery ratingbox.js Demos

Display a rating box in read only mode

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

Display text value on the right side

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

Setting options in data-* attributes.

Note: data-* attributes take precedence over jQuery configuration

<div id="rating3" class="ratingbox" data-value="2.5" data-display-value="true"></div> <script> $('#rating3').ratingBox({ value: 1 //no effects: data-* attributes takes precedence }); </script>

Increase size. Values between 1 and 5

<div id="rating4" class="ratingbox"></div> <script> $('#rating4').ratingBox({ value: 2.5, size: 2 }); </script>

Allow user input its rate

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

Custom click event handler

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

Surround the hidden input element for FORM usage.

Analize DOM element to see input hidden value changes as well

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

Ajax usage

<div id="rating8" class="ratingbox"></div> <script> $('#rating8').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'); }); } }); </script>

Setting value programmatically

Important: Don't set data-value directlly, use setValue method instead.

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



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


Name Input Returns Description
setValue value (Int32) N/A Set ratingBox value programmatically


Name Handles
onClick Click