How to make an awesome star rating

Question

Is there an easy way to create a 5 star rating element in jQuery-mobile? Like http://orkans-tmp.22web.net/star_rating/ .

Answer 1

You can use any jQuery plugin that performs this task. I used to use the jQuery Star Rating plugin in

http://www.fyneworks.com/jquery/star-rating/

The only thing you need to think about is to disable jQuery Mobile from rendering switches with your own style. You can achieve this by adding data-role="none" to the input tag, see

http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/forms/forms-all-native.html

Answer 2

I find the jQuery Raty plugin a lot easier to use!

I could never get a class = asterisk to work with fyneworks.

Answer 3

If you are looking for a rating component for mobile, check out http://demo.mobiscroll.com/rating

EDIT: and the scroller integrates with jQuery Mobile Themes. A tutorial on creating a rating system using jQM + Rating and Grading scroller is here .

Answer 4

I managed to use http://www.fyneworks.com/jquery/star-rating/ along with jquery-mobile (version 1.4.5)

the above trick with the data role = "no" in the input field does not work. you need to create your own tag. I used the simplest example at http://www.fyneworks.com/jquery/star-rating/#tab-Testing

 <div data-role="none"> <input name="star1" type="radio" class="star" value="1"/> <input name="star1" type="radio" class="star" value="2"/> <input name="star1" type="radio" class="star" value="3"/> <input name="star1" type="radio" class="star" value="4"/> <input name="star1" type="radio" class="star" value="5"/> </div> 

color and size adjustment is quite complicated and requires changes in the star.gif and .css file

Answer 5

Here is my solution with jQuery Mobile. I hope you will like it:

 <style> .rated { background-color: yellow !important; } .rating a { border: 0px !important; } </style> <div class="rating" id="first"> <a href="#" data-role="button" data-inline="true" data-icon="star" data-vote="1" data-iconpos="notext"></a> <a href="#" data-role="button" data-inline="true" data-icon="star" data-vote="2" data-iconpos="notext"></a> <a href="#" data-role="button" data-inline="true" data-icon="star" data-vote="3" data-iconpos="notext"></a> <a href="#" data-role="button" data-inline="true" data-icon="star" data-vote="4" data-iconpos="notext"></a> <a href="#" data-role="button" data-inline="true" data-icon="star" data-vote="5" data-iconpos="notext"></a> </div> $(".rating a").on("vmouseover", function () { var id = $(this).parent().attr("id"); $("#" + id + ".rating a").each(function (i, v) { $(v).removeClass("rated"); }); $(this).prevAll().each(function (i, v) { $(v).addClass("rated"); }); $(this).addClass("rated"); $("#" + id).data("vote", $(this).data("vote")); }); 

https://jsfiddle.net/lgrillo/cz7z479j/