Rating / Basic usage
Try now RISK-FREE for 30 days
Amazing support included! We'll help you get started in no time!
Amazing support included! We'll help you get started in no time!
  • 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/3mf1
Source

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;
    });

});