使用jQuery和CSS将数字变成星级评分显示 [英] Turn a number into star rating display using jQuery and CSS
问题描述
我一直在寻找jquery插件，并想知道如何适应该插件将一个数字（如4.8618164）变成一个4.8618164星星填充5.基本上解释一个数字<5到星星填充5星评分系统使用jQuery / JS / CSS。
请注意，这只会显示/显示来自已有号码的星号评等，而不接受新的评分提交。
这里有一个解决方案，只使用一个非常微小和简单的图像和一个自动生成的span元素：
CSS
span.stars，span.stars span {
display ：block;
background：url（stars.png）0 -16px repeat-x;
width：80px;
height：16px;
}
span.stars span {
background-position：0 0;
}
图片
请注意： 热门链接到上面的图片！
jQuery
$。fn.stars = function（）{
return $（this）.each（function（）{
//获取值
var val = parseFloat ）.html（））;
//确保该值在0 - 5范围内，乘以得到width
var size = Math.max（0，（Math.min ）））* 16;
//创建恒星夹
var $ span = $（'< span />').width(size）;
//替换数值与星星
$（this）.html（$ span）;
}）;
}
如果您想将星星限制为只有一半或四分之一星的大小， var size 行之前的这些行之一：
val = Math .round（val * 4）/ 4; / *舍入到最接近的季度* /
val = Math.round（val * 2）/ 2; / *舍入到最接近的一半* /
HTML
$ b b
< span class =stars> 4.8618164< / span>
< span class =stars> 2.6545344< / span>
< span class =stars> 0.5355< / span>
< span class =stars> 8< / span>
使用
$（function（）{
$（'span.stars'）。stars（）;
}）;
输出
演示
http://www.ulmanen.fi/stuff/stars.php
这可能适合你的需要。使用这种方法，你不必计算任何三个季度或什么不是星的宽度，只是给它一个浮点，它会给你的星星。
对星星如何呈现的一个小解释可能是按顺序的。
脚本创建两个块级别跨度元素。这两个跨度最初都获得了80px * 16px的大小和一个背景图像stars.png。跨度是嵌套的，因此跨度的结构如下所示：
< span class =stars>
< span>< / span>
< / span>
外部范围获得 background-position 的 0 -16px 。这使得灰色星在外部可见。由于外跨的高度为16像素，而 repeat-x ，则只显示5个灰色星星。
内部跨度具有 background-position 的 0 0 ，其仅使黄色星形可见。 p>
这当然可以使用两个单独的图像文件，star_yellow.png和star_gray.png。但由于恒星有固定的高度，我们可以很容易地将它们组合成一个图像。这使用 CSS sprite技术。
现在，由于跨度是嵌套的，它们会自动覆盖在彼此之上。在默认情况下，当两个跨度的宽度都是80px时，黄色星会完全遮掩灰色星。
但是当我们调整内跨的宽度时，
可访问性，明智的做法是将浮点数留在内部范围内，并隐藏 text-indent：-9999px ，以便CSS关闭的人至少可以看到浮点数而不是星星。
希望这有意义。
更新2010/10/22
现在更紧凑，更难理解！也可以压缩到一个线程：
$。fn.stars = function（）{
return $ （this）.each（function（）{
$（this）.html（$（'< span />').width(Math.max(0,( Math.min（5，parseFloat $（this）.html（）））））* 16））;
}）;
}
I have been looking at jquery plugin and was wondering how to adapt that plugin to turn a number (like 4.8618164) into a 4.8618164 stars filled out of 5. Basically interpreting a number <5 into stars filled in a 5-star rating system using jQuery/JS/CSS.
Note that this would only display/show the stars rating from an already available number and not accept new ratings submissions.
Here's a solution for you, using only one very tiny and simple image and one automatically generated span element:
CSS
span.stars, span.stars span {
display: block;
background: url(stars.png) 0 -16px repeat-x;
width: 80px;
height: 16px;
}
span.stars span {
background-position: 0 0;
}
Image
Note: do NOT hotlink to the above image! Copy the file to your own server and use it from there.
jQuery
$.fn.stars = function() {
return $(this).each(function() {
// Get the value
var val = parseFloat($(this).html());
// Make sure that the value is in 0 - 5 range, multiply to get width
var size = Math.max(0, (Math.min(5, val))) * 16;
// Create stars holder
var $span = $('<span />').width(size);
// Replace the numerical value with stars
$(this).html($span);
});
}
If you want to restrict the stars to only half or quarter star sizes, add one of these rows before the var size row:
val = Math.round(val * 4) / 4; /* To round to nearest quarter */
val = Math.round(val * 2) / 2; /* To round to nearest half */
HTML
<span class="stars">4.8618164</span>
<span class="stars">2.6545344</span>
<span class="stars">0.5355</span>
<span class="stars">8</span>
Usage
$(function() {
$('span.stars').stars();
});
Output
Demo
This will probably suit your needs. With this method you don't have to calculate any three quarter or whatnot star widths, just give it a float and it'll give you your stars.
A small explanation on how the stars are presented might be in order.
The script creates two block level span elements. Both of the spans initally get a size of 80px * 16px and a background image stars.png. The spans are nested, so that the structure of the spans looks like this:
<span class="stars">
<span></span>
</span>
The outer span gets a background-position of 0 -16px. That makes the gray stars in the outer span visible. As the outer span has height of 16px and repeat-x, it will only show 5 gray stars.
The inner span on the other hand has a background-position of 0 0 which makes only the yellow stars visible.
This would of course work with two separate imagefiles, star_yellow.png and star_gray.png. But as the stars have a fixed height, we can easily combine them into one image. This utilizes the CSS sprite technique.
Now, as the spans are nested, they are automatically overlayed over each other. In the default case, when the width of both spans is 80px, the yellow stars completely obscure the grey stars.
But when we adjust the width of the inner span, the width of the yellow stars decreases, revealing the gray stars.
Accessibility-wise, it would have been wiser to leave the float number inside the inner span and hide it with text-indent: -9999px, so that people with CSS turned off would at least see the floating point number instead of the stars.
Hopefully that made some sense.
Updated 2010/10/22
Now even more compact and harder to understand! Can also be squeezed down to a one liner:
$.fn.stars = function() {
return $(this).each(function() {
$(this).html($('<span />').width(Math.max(0, (Math.min(5, parseFloat($(this).html())))) * 16));
});
}
这篇关于使用jQuery和CSS将数字变成星级评分显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
