Choose Demo
Date & Time Calendar Range Select Numpad Color Listview Rating Image & Text Treelist Distance Speed Temperature Mass Force Timespan Timer Number Demo Apps
Mobiscroll
iOS7
iOS
Android Holo
Android Holo Light
jQuery Mobile 1.4
jQuery Mobile 1.3
Android
Bootstrap
Windows Phone
Windows Phone Light
Sense UI
Sense 5
Modal
Bubble
Top
Bottom
English
Cestina
Chinese
Deutsch
English (UK)
Español
Français
Italiano
Japanese
Magyar
Nederlands
Norsk
Polski
Português Europeu
Pt. Brasileiro
Româna
Slovencina
Svenska
Türkçe
Русский
Русский (UA)
فارسی
No Device
iPhone
Android
Windows Phone
Blackberry
iPad Mini
Try now RISK-FREE for 15 days
Rating / Basic usage
See how this demo looks on your phone and tablet!
Send Email to Device
  • Chocolate sticks

    Chocolate sticks

    4 of 5
  • Chocolate chips

    Chocolate chips

    4 of 5
  • Milk chocolate

    Milk chocolate

    3 of 5
  • Chocolate cupcake

    Chocolate cupcake

    5 of 5
  • Chocolate with air

    Chocolate with air bubbles

    5 of 5
  • Chocolate truffles

    Chocolate truffles

    5 of 5
See what makes this demo awesome
Highlights
Easy Product Ratings
Maintains Post Data
Updates HTML on Rating
What to do
Tap on your Favorite Chocolate
Rate Items
Try Bubble Display Mode
Try it on your phone at msc.li/x2bn

HTML

Copy to Clipboard
<ul class="products">
    <li>
        <div class="product">
            <img src="/Content/img/demos/product1.png" />
            <h3>Chocolate sticks</h3>
            <p>Chocolate sticks</p>
            <span class="rate">
                <span class="rating">4 of 5</span>
            </span>
        </div>
        <input type="hidden" name="rating[]" class="mobiscroll" value="4" />
    </li>
    <li>
        <div class="product">
            <img src="/Content/img/demos/product2.png" />
            <h3>Chocolate chips</h3>
            <p>Chocolate chips</p>
            <span class="rate">
                <span class="rating">4 of 5</span>
            </span>
        </div>
        <input type="hidden" name="rating[]" class="mobiscroll" value="4" />
    </li>
    <li>
        <div class="product">
            <img src="/Content/img/demos/product3.png" />
            <h3>Milk chocolate</h3>
            <p>Milk chocolate</p>
            <span class="rate">
                <span class="rating">3 of 5</span>
            </span>
        </div>
        <input type="hidden" name="rating[]" class="mobiscroll" value="3" />
    </li>
    <li>
        <div class="product">
            <img src="/Content/img/demos/product4.png" />
            <h3>Chocolate cupcake</h3>
            <p>Chocolate cupcake</p>
            <span class="rate">
                <span class="rating">5 of 5</span>
            </span>
        </div>
        <input type="hidden" name="rating[]" class="mobiscroll" value="5" />
    </li>
    <li>
        <div class="product">
            <img src="/Content/img/demos/product5.png" />
            <h3>Chocolate with air</h3>
            <p>Chocolate with air bubbles</p>
            <span class="rate">
                <span class="rating">5 of 5</span>
            </span>
        </div>
        <input type="hidden" name="rating[]" class="mobiscroll" value="5" />
    </li>
    <li>
        <div class="product">
            <img src="/Content/img/demos/product6.png" />
            <h3>Chocolate truffles</h3>
            <p>Chocolate truffles</p>
            <span class="rate">
                <span class="rating">5 of 5</span>
            </span>
        </div>
        <input type="hidden" name="rating[]" class="mobiscroll" value="5" />
    </li>
</ul>

Javascript

Copy to Clipboard
$(function(){

    $('.mobiscroll').each(function () {
        $(this).mobiscroll().rating({
            theme: 'default',
        accent: ' ',
            lang: ' ',
            display: 'inline',
            animate: ' ',
            mode:'scroller',
            anchor: $(this).closest('li'),
            label: 'Rate Item',
            onSelect: function (v, inst) {
                $(this).closest('li').find('.rating').text(v + ' of 5');
            }
        });
    });

    $('.product').click(function(){
        $(this).closest('li').find('input').mobiscroll('show');
        return false;
    });

});