如何获得出色的星级评级

发布于 2024-11-17 11:39:44 字数 246 浏览 4 评论 0原文

有没有一种简单的方法可以在 Jquery-mobile 中生成 5 星级评级元素? 类似于 http://orkans-tmp.22web.net/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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

┈┾☆殇 2024-11-24 11:39:44

您可以使用任何 jQuery 插件来完成此任务。过去,我使用过

http://www.fyneworks.com 上的 jQuery 星级评级插件/jquery/star- rating/

您唯一需要考虑的就是阻止 jQuery Mobile 使用自己的样式渲染单选按钮。您可以通过将 data-role="none" 添加到输入标记来实现此目的,请参阅

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

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

日裸衫吸 2024-11-24 11:39:44

我发现 jQuery Raty 插件 更容易使用!

我永远无法让 class="star" 与 fyneworks 一起工作。

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

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

无风消散 2024-11-24 11:39:44

如果您正在寻找移动评级组件,请查看 http://demo.mobiscroll.com/ rating编辑

:滚动条与 jQuery Mobile 主题集成。
使用 jQM + rating & 构建评级系统的教程分级滚动条此处

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.

尸血腥色 2024-11-24 11:39:44

我已经设法使用 http://www.fyneworks.com/jquery/star- rating/< /a> 与 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 文件

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

羞稚 2024-11-24 11:39:44

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

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/

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文