Twitter Bootstrap rtl评级明星

Question

我正在使用twitter bootstrap来构建我的站点UI.

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

我希望它从右到左(意思是右边选择一颗星)

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

如何制定评级方向:rtl？

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

(在悬停和选择后)？

Answer 1

我也使用bootstrap.今天早上我开始研究星级评分并遇到了FontAwesome网站.在这里,您将找到引导程序中星级评级的工作示例.

在CSS-技巧网站提供的它是什么做了很好的解释所需要的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;

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

希望这可以帮助.

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'));
})

这是工作代码