Rating

@@adsense
small
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>