如何制作出令人敬畏的星级评分

Question

是否有一种简单的方法可以在Jquery-mobile中生成5星评级元素？ 与http://orkans-tmp.22web.net/star_rating/类似。

Answer 1

您可以使用任何完成此任务的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

Answer 2

我发现jQuery Raty plugin更容易使用！

我永远无法使用fyneworks与class =“star”合作。

Answer 3

如果您正在寻找移动设备评分，请查看http://demo.mobiscroll.com/rating

编辑：滚动器与jQuery Mobile主题集成。 使用jQM + Rating＆amp; amp ;;建立评级系统的教程评分滚动条here。

Answer 4

我设法使用http://www.fyneworks.com/jquery/star-rating/和jquery-mobile（版本1.4.5）

上面提到的data-role =＆＃34; none＆＃34;在输入字段上不起作用。 你需要渲染一个自己的标签。我使用了页面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文件

Answer 5

这是我使用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/