jQuery ratingbox.js Demos
Display a rating box in read only mode
<![CDATA[
<div id="rating1" class="ratingbox"></div>
<script>
$('#rating1').ratingBox({
value: 2
});
</script>
]]>
Display text value on the right side
<![CDATA[
<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
<![CDATA[
<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
<![CDATA[
<div id="rating4" class="ratingbox"></div>
<script>
$('#rating4').ratingBox({
value: 2.5,
size: 2
});
</script>
]]>
Allow user input its rate
<![CDATA[
<div id="rating5" class="ratingbox"></div>
<script>
$('#rating5').ratingBox({
mode: 'rating'
});
</script>
]]>
Custom click event handler
<![CDATA[
<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
<![CDATA[
<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
<![CDATA[
<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.
<![CDATA[
<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>
]]>
Reference
Options
| 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 |
Methods
| Name |
Input |
Returns |
Description |
| setValue |
value (Int32) |
N/A |
Set ratingBox value programmatically |
Events
| Name |
Handles |
| onClick |
Click |