基于javascript的进度条
我很好奇如何开发基于 javascript(或也受益于 jquery)的进度指示器:
alt text http://img707.imageshack.us/img707/3295/dealindicator.png
我的第一个想法是:
function drawBar(total,sofar){
.........................
}
它消耗最大数量(在我们的例子中为 20)和到目前为止(15 为图片)。
但如何实施呢?
有没有基于jquery的插件来实现这个?
问候
I am curious how can a javascript (or also benefiting from jquery) based progress indicator such can be developed:
alt text http://img707.imageshack.us/img707/3295/dealindicator.png
My first idea is something such as:
function drawBar(total,sofar){
.........................
}
where it consumes the max number(20 in our case) and sofar (15 for the picture).
But how can it be implemented?
Is there any jquery based plugin to achieve this?
Regards
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
这通常是通过 CSS 完成的,方法是创建一个
div
进度条的总大小,然后再创建另一个div
子元素,该子元素的百分比宽度为需要的宽度被充满。您可以根据需要设置
div
的样式。您可能希望使用background-color
或background-image
& 来设置内部 div 的样式。背景重复
。它可以是纯色的,也可以是渐变的,也可以是带状的图案,这似乎是相当流行的。你在 Google 上搜索过 jQuery 插件吗?它们很容易找到。例如: http://t.wits.sg/jquery-progress-bar/
This is usually done with CSS, by creating a
div
the total size of your progressbar, and then having anotherdiv
child of that which has a percentage width of how much needs to be filled.You can style the
div
s anyway you want. You likely want to style the inner div withbackground-color
, orbackground-image
&background-repeat
. It can be a solid colour, a gradient, or a banded pattern, which seems to be rather popular.Have you Google'd for jQuery plugins? They are fairly easy to find. Here's one for example: http://t.wits.sg/jquery-progress-bar/