CODEWITHSUNDEEP
jquery-mobilerating
lajlev
lajlev

Reputation: 782

How to make an awesome star rating

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

Upvotes: 8

Views: 20698

Answers (5)

L.Grillo
L.Grillo

Reputation: 981

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/

Upvotes: 0

Lorenz H&#228;nggi
Lorenz H&#228;nggi

Reputation: 161

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

Upvotes: 0

Clinton Ward
Clinton Ward

Reputation: 2511

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

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

Upvotes: 11

Levi Kovacs
Levi Kovacs

Reputation: 1159

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.

Upvotes: 0

Christoph Baudson
Christoph Baudson

Reputation: 1071

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

Upvotes: 12

Related Questions