How to make an awesome star rating

Question

Is there a simple way to generate a 5 star rating element in Jquery-mobile? Similar to http://orkans-tmp.22web.net/star_rating/.

enter image description here

score 12 · Accepted Answer · answered Jun 27 '11 at 10:08

12

You can use any jQuery plugin that fulfills this task. In the past, I have used the jQuery Star Rating plugin at

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

The only thing you need to think about is to stop jQuery Mobile from rendering the radio buttons with its 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

answered Jun 27 '11 at 10:08

Christoph Baudson

1,071
11
12

Yeah... this doesnt work. in what order do you put your jscript in terms of declaration? – user1112324 Jul 11 '12 at 12:26

score 11 · Answer 2 · edited Mar 10 '14 at 16:51

11

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

I could never get the class="star" to work with fyneworks.

edited Mar 10 '14 at 16:51

Michael

3,982
4
30
46

answered Jun 18 '12 at 08:51

Clinton Ward

2,441
1
22
26

I must say that I agree; I tried both and can get star-rating working in a standalone jQuery page, but could not get things to display correctly when integrated into a jQuery Mobile responsive setup. While Raty works fine in that setup. – jedison May 22 '14 at 09:49

Levi Kovacs · Answer 3 · 2013-01-14T13:03:21.377

0

If you're looking for a mobile rating component, take a look at the http://demo.mobiscroll.com/rating

EDIT: And the scroller integrates with jQuery Mobile Themes. Tutorial for building a rating system with jQM + Rating & Grading scroller here.

edited Jan 14 '13 at 13:03

answered Aug 20 '12 at 14:36

Levi Kovacs

1,159
8
14

1

Mobiscroll isn't free. It's $8. – DOK Oct 24 '12 at 13:50

score 0 · Answer 4 · answered Apr 15 '15 at 14:15

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

the above mentioned trick with data-role="none" on the input field does not work. you need to render an own tag around. I used the most simple example on page 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>

adjustments to color and size is quite difficult and needs changes to the star.gif and .css file

score 0 · Answer 5 · answered May 12 '16 at 15:31

Here's my solution with Jquery Mobile. Hope you 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/

How to make an awesome star rating

5 Answers5