6

我正在使用 twitter bootstrap 来构建我的网站 UI。

我想创建一个星级评分页面。

我希望它是从右到左（意味着一颗星被选在右边）

我看到我最好的选择是使用 Jquery-UI 插件，因为引导程序没有这样的工具？

如何制定评级方向：rtl？

另外，如何将星星调整为黄色而不是红色

（悬停和选择后）？

4

5 回答 5

15

我也使用引导程序。今天早上，我开始查看星级评分，发现了FontAwesome网站。在这里，您将找到引导程序中星级评级的工作示例。

CSS-tricks网站提供了所需的 CSS，并很好地解释了它在做什么。

对于以下链接的缺失，我深表歉意。由于我是 stackoverflow 上的“新海报”，我只能包含两个超链接。因此，您需要将要点粘贴到 dabble.com URL 中才能看到它们。（有人请投票支持我的声誉，以便我可以发布更多链接：）

您可以在 dabblet.com 站点上找到工作示例，以便在将其引入您的 cown 代码库之前对其进行一些操作。css-tricks dabblet 位于https://gist.github.com/1709019 。

您可能还需要查看其他几个 dabblets：

@chriscoyier 在https://gist.github.com/1718992有不同的实现 。您可以通过更改 float:right; 在此实现中从 LTR 更改为 RTL；浮动：左；

@mprogano 在https://gist.github.com/1712123上有一个更简洁的版本。您可以使用方向从 LTR 更改为 RTL： rtl;

一些涉猎示例允许您更改星形颜色，其他示例使用图像，因此您必须创建自己的图像来更改颜色。

希望这可以帮助。

于 2012-04-19T17:14:07.100 回答
13

得到了一些启发，并尝试了一些“更少代码”的东西。还添加了一个 js 功能来提醒选择的星星数量（当然可以很容易地改变它来做一些更花哨的事情）。

http://jsfiddle.net/RpfLa/135/

<div class="star-rating"><s><s><s><s><s></s></s></s></s></s></div>
<div class="star-rating-rtl"><s><s><s><s><s></s></s></s></s></s></div>

玩得开心！

编辑：另见http://jsfiddle.net/RpfLa/400/预设评级。

<s class="rated"></s>
于 2012-07-29T18:02:18.863 回答
5

这是一个简单的纯 CSS 解决方案，用于为 twitter bootstrap 的字体图标评分。要与任何其他字体图标（如 fontawesome 等）一起使用，只需更改 HTML 中的类名

HTML：

<div class="rating"
  <span id="5" class="glyphicon glyphicon-star"></span>
  <span id="4" class="glyphicon glyphicon-star"></span>
  <span id="3" class="glyphicon glyphicon-star"></span>
  <span id="2" class="glyphicon glyphicon-star"></span>
  <span id="1" class="glyphicon glyphicon-star"></span>
</div>

CSS：

.rating span {
  font-size: 25px;
  cursor: pointer;
  float: right; //remove 'float right' for right to left
}
.rating span:hover, .rating span:hover ~ span{
  color: red; //gold or any other color 
}

Jquery捕获点击评分

$('.rating span').click(function(){
    alert($(this).attr('id'));
})

这是工作代码

于 2014-02-16T00:02:35.823 回答
2

前段时间我遇到了同样的问题，最后创建了一个小插件。我最近为 Bootstrap 3 更新了它：

https://github.com/javiertoledo/bootstrap-rating-input

欢迎您发送反馈或请求请求 :-)

最好的祝福！

于 2014-01-03T19:06:15.287 回答
1

考虑到各种插件面临的问题 - 这是我使用各种可配置选项创建的Bootstrap JQuery Star 评级插件（其中包含场景演示）。其中一些受到各种想法（例如，维克多）和其他用户需求的启发。我认为您可以针对提到的场景尝试此操作并告知。

尽可能使用 Bootstrap 3.x 字形和纯 CSS，包括 RTL 支持，支持插件事件和方法。你可以参考这里的来源。

编辑：该插件现在支持分数星级评级，也很少有其他增强功能。

于 2014-03-07T07:12:21.293 回答