Jak zrobić wspaniałą gwiazdkę Ocena

Question

Czy istnieje prosty sposób na wygenerowanie elementu 5 gwiazdek w Jquery-mobile? Podobny do http://orkans-tmp.22web.net/star_rating/.

Answer 1

Można użyć dowolnego plugin jQuery, która spełnia to zadanie. W przeszłości Użyłem wtyczki jQuery Star Rating na

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

Jedyną rzeczą, którą trzeba myśleć o to, aby zatrzymać jQuery Mobile, z renderowania przycisków radiowych z własnym stylem. Można to osiągnąć przez dodanie data-role="none" do znacznika wejściowego, patrz

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

Answer 2

znajdę jQuery Raty plugin dużo łatwiejszy w użyciu!

Nigdy nie mogłem uzyskać klasy = "gwiazda" do pracy z obiektami.

Answer 3

Jeśli szukasz znamionowej komponentu telefonu, spójrz na http://demo.mobiscroll.com/rating

EDIT: A scroller integruje się z tematami jQuery Mobile. Samouczek do budowy systemu oceny z jQM + Ocena & Klasyfikowanie przewijaka here.

Answer 4

udało mi się wykorzystać http://www.fyneworks.com/jquery/star-rating/ razem z jQuery-mobile (wersja 1.4.5)

powyższe Sztuczka z data-role = "none" na polu wprowadzania nie działa. musisz renderować własny znacznik. Użyłem najbardziej prosty przykład na stronie 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> 

korekty koloru i rozmiaru jest dość trudne i wymaga zmian w pliku .css star.gif i

Answer 5

Oto moje rozwiązanie z 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/