Rate your favorite Chocolate Products.
In this demo you'll see how easily you can add rating to your product listing. Each item can be Rated with 5 to 1 stars.
Make sure you play with the different display modes and themes.
In this demo you'll see how easily you can add rating to your product listing. Each item can be Rated with 5 to 1 stars.
Make sure you play with the different display modes and themes.
-
Chocolate sticks
Chocolate sticks
-
Chocolate chips
Chocolate chips
-
Milk chocolate
Milk chocolate
-
Chocolate cupcake
Chocolate cupcake
-
Chocolate with air
Chocolate with air bubbles
-
Chocolate truffles
Chocolate truffles
Source
HTML
Copy to Clipboard
<ul class="products">
<li>
<div class="product">
<img src="/Content/img/demos/product1.png" />
<h3>Chocolate sticks <span class="rating">(4/5)</span></h3>
<p>Chocolate sticks</p>
<span class="rate">
<span class="rating-star-cont">
<span class="rating-star rating-filled-star"></span>
</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 <span class="rating">(4/5)</span></h3>
<p>Chocolate chips</p>
<span class="rate">
<span class="rating-star-cont">
<span class="rating-star rating-filled-star"></span>
</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 <span class="rating">(3/5)</span></h3>
<p>Milk chocolate</p>
<span class="rate">
<span class="rating-star-cont">
<span class="rating-star rating-filled-star"></span>
</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 <span class="rating">(5/5)</span></h3>
<p>Chocolate cupcake</p>
<span class="rate">
<span class="rating-star-cont">
<span class="rating-star rating-filled-star"></span>
</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 <span class="rating">(5/5)</span></h3>
<p>Chocolate with air bubbles</p>
<span class="rate">
<span class="rating-star-cont">
<span class="rating-star rating-filled-star"></span>
</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 <span class="rating">(5/5)</span></h3>
<p>Chocolate truffles</p>
<span class="rate">
<span class="rating-star-cont">
<span class="rating-star rating-filled-star"></span>
</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 + '/5)');
}
});
});
$('.product').click(function(){
$(this).closest('li').find('input').mobiscroll('show');
return false;
});
});