Rating
@@adsensesmall
default
large
Custom number of stars
poor (value 1/3)
regular (value up to 2/3)
good (value from 2/3)
custom number of stars
Declarative style
<div class="rating" data-role="rating"></div>
Javascript style
<div class="rating" id="rating"></div>
<script>
$(function(){
$("#rating").rating();
});
</script>
Options
Parameter | Data-* | Type | Default value | Description |
stars | data-stars | int | 5 | Stars count |
value | data-value | float | 0 | Rating value |
half | data-half | boolean | true | Can be half value |
static | data-static | boolean | false | If true rating show as static |
showScore | data-show-score | boolean | true | Show or hide score label |
scoreTitle | data-score-title | string | Current: | Score label title |
size | data-size | string | default | Rating size [default, small, large] |
colorRate | data-color-rate | boolean | false | If true rating is displayed in color depending on the values |
Events
Event | Data-* | Params | Description |
onRate | data-on-rate | (value, star, widget) | The event fired when the star click. This function can return true or false. If function return false, rating not changed |
onRated | data-on-rated | (value, star, widget) | The event fired when the star is pressed and onRate return true |
Methods
Method | Description | Method call |
value | Set or get rating value |
get value $("#itemid").rating('value') or $("#itemid").data('metro.rating').value()
set value $("#itemid").rating('value', val) or $("#itemid").data('metro.rating').value(val)
|
Use events and methods
onRate
<div class="rating" data-role="rating" data-size="large" data-size="small" data-on-rate="demo_func_onRate"></div>
<script>
function demo_func_onRate(value, star, widget){
if (value < 3) {
alert('Please rate as more then 3');
return false;
}
alert('Good rate');
return true;
}
</script>
onRated
<div class="rating" data-role="rating" data-size="large" data-size="small" data-on-rate="demo_func_onRated"></div>
<script>
function demo_func_onRated(value, star, widget){
alert('You rated this as ' + value);
}
</script>
Set or get Value
<div class="rating" data-role="rating" data-size="large" data-size="small" id="demo_rating_1"></div>
<button class="button" onclick="demo_rating1_get_value()">Get current value</button>
<div class="input-control text">
<input type="text" id="new_value_for_demo_rating_1" value="0">
<button class="button" onclick="demo_rating1_set_value()">Set value</button>
</div>
<script>
function demo_rating1_get_value(){
var rating = $('#demo_rating_1').data('rating');
alert(rating.value());
}
function demo_rating1_set_value(){
var value = $('#new_value_for_demo_rating_1').val();
var rating = $('#demo_rating_1').data('rating');
if (value < 0 || value > 5) {
alert('You can set value in range 0...5');
return false;
}
rating.value(value);
}
</script>