Question

我正在使用twitter bootstrap构建我的网站用户界面。

我想创建星级评分页。

我希望它从右到左（意味着右边选择了一颗星）

我认为我最好的操作是使用Jquery-UI插件，因为bootstrap没有这样的工具？

如何制定评级方向：rtl？

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

（悬停时和选择后）？

Answer 1

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

CSS-tricks网站为所需的CSS提供了很好的解释。

我为下面缺少链接道歉。因为我是stackoverflow上的“新海报”，我只能包含两个超链接。因此，您需要将要点粘贴到dabble.com网址中以查看它们。（有人请将我的声誉投票，以便发布更多链接：）

您可以在dabblet.com网站上找到工作示例，在将其带入您的cown代码库之前稍微玩一下。 css-tricks dabblet在https://gist.github.com/1709019

您可能还想查看其他几个问题：

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

@mprogano在https://gist.github.com/1712123处有一个更简洁的版本。您可以使用direction：rtl;

从LTR更改为RTL

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

希望这有帮助。

Answer 2

有点灵感，尝试了一些类似“少代码”的东西。还添加了一个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>

Answer 3

这是一个简单的纯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'));
})

以下是working code

Answer 4

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

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

欢迎您发送反馈或提出请求： - ）

祝你好运！

Answer 5

考虑到各种插件所面临的问题 - 这里是Bootstrap JQuery Star rating plugin我使用各种可配置选项创建的（场景的演示包含在其中）。其中一些受到各种想法（例如Victor）和其他用户需求的启发。我想你可以为你提到的场景尝试这个，让我们知道。

尽可能使用Bootstrap 3.x glyphicons和纯CSS，包括RTL支持，支持插件事件和方法。您可以参考source here。

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

Twitter Bootstrap rtl评级明星

5 个答案: