如何制作一个能反映逐步表单进度的jquery/css进度条? [英] How can I make a jquery/css progression bar that reflects step by step form progression?
问题描述
我看到很多示例进度条,这些进度条显示进度条已被填充.但是,我只想知道如何使进度逐步反映进度.可以在此处看到我想要的一个很好的例子.任何其他页面上有用的代码或示例/演示都很好.
I see a lot of example progress bars that show the progression bar being filled up. However, I would just like to know how I could make a progress reflect step by step form progress. A good example of what I would want can be seen Here. Any helpful code or examples/demos from other pages would be good to have.
谢谢!
推荐答案
如果您喜欢Buffalo之一,只需看看他们是如何做到的.
If you like the Buffalo one, just have a look at how they do it.
首先,他们像这样定义一个div:
First they define a div like this:
<div id="progress">
<div id="complete" class="s1">
<div id="marker"></div>
</div>
</div>
然后他们使用CSS根据进度(由class ="s1"等控制)来渲染div.
Then they use CSS to render the div based on the progress (which is controlled with class="s1" and so on).
/**
* PROGRESS
*/
#progress,#complete {
width: 520px;
margin: 1px 0 19px;
height: 32px;
background:url(/img/backgrounds/progress.png);
position:relative;
}
#complete {
background-position: 0px 57px;
margin-top: 0;
}
#complete #marker {
position: absolute;
top: 0;
right: -26px;
background:url(/img/backgrounds/markers.png);
width: 26px;
height: 32px;
}
#progress .s1 {
width: 19px;
}
#progress .s2 {
width:111px;
}
#progress .s3 {
width:203px;
}
#progress .s4 {
width:295px;
}
#progress .s5 {
width:386px;
}
#progress .s6 {
width:478px;
}
#progress .s2 #marker {
background-position: -26px 0;
}
#progress .s3 #marker {
background-position: -52px 0;
}
#progress .s4 #marker {
background-position: -78px 0;
}
#progress .s5 #marker {
background-position: -104px 0;
}
#progress .s6 #marker {
background-position: -130px 0;
}
CSS处理图像以显示所需状态
The CSS manipulates images to show the desired state
这篇关于如何制作一个能反映逐步表单进度的jquery/css进度条?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!