Как сделать потрясающий звездный рейтинг - PullRequest
Новая
       5

Как сделать потрясающий звездный рейтинг

8 голосов
/ 26 июня 2011

Есть ли простой способ создать 5-звездочный рейтинг в Jquery-mobile? Аналогично http://orkans -tmp.22web.net / star_rating / .

enter image description here

Ответы [ 5 ]

12 голосов
/ 27 июня 2011

Вы можете использовать любой плагин jQuery, который выполняет эту задачу.Раньше я использовал плагин jQuery Star Rating на

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

Единственное, о чем вам нужно подумать, - это остановить jQuery Mobile от рендеринга переключателей в своем собственном стиле.,Вы можете достичь этого, добавив data-role="none" к входному тегу, см.

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

11 голосов
/ 18 июня 2012

Я считаю, что плагин jQuery Raty намного проще в использовании!

Я никогда не мог заставить class = "star" работать с fyneworks.

0 голосов
/ 12 мая 2016

Вот мое решение с Jquery Mobile. Надеюсь, вам понравится: 

<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/

0 голосов
/ 15 апреля 2015

мне удалось использовать http://www.fyneworks.com/jquery/star-rating/ вместе с jquery-mobile (версия 1.4.5)

вышеупомянутый трюк с data-role = "none" в поле ввода не работает,вам нужно сделать собственный тег вокруг.Я использовал самый простой пример на странице 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>

. Регулировка цвета и размера довольно сложна и требует изменений в файле star.gif и .css

.
0 голосов
/ 20 августа 2012

Если вы ищете компонент мобильного рейтинга, взгляните на http://demo.mobiscroll.com/rating

РЕДАКТИРОВАТЬ: И скроллер интегрируется с jQuery Mobile Themes. Учебник для построения рейтинговой системы с помощью jQM + Rating & Grading scroller здесь .

...