我想要一个进度条来显示百分比填充但我想让它像下面这样的温度计垂直.这可能是
Jquery UI进度条上的一个选项吗？我想要一些看起来像
this http://magellanband.files.wordpress.com/2009/05/fundraiser-goal-thermometer-thumb7625364.jpg的东西
解决方法@H_403_4@
有
a plugin,但我没有使用它,所以我不知道你是否可以适应它.
或者,您可以使用HTML& CSS.我做了a demo here,我添加了一个jQuery UI Slider来控制条形图.这是基本代码(仅适用于条形码)
HTML
<div class="progressbar">
<span class="progressbar-value">
<em class="progressbar-cover"></em>
</span>
</div>
CSS
.progressbar {
width: 25px;
height: 215px;
position: relative;
background: transparent url(http://i48.tinypic.com/290tvnk.png) no-repeat;
}
.progressbar-value {
position: absolute;
display: block;
margin: 0;
border: 0;
width: 15px;
height: 200px;
top: 7px;
left: 5px;
overflow: hidden;
text-indent: -30px;
background: #0f0 url(http://i45.tinypic.com/minc5g.png) center center;
}
.progressbar-cover {
position: absolute;
display: block;
width: 15px;
height: 200px;
border: 0;
left: 0;
bottom: 0%;
background: transparent url(http://i49.tinypic.com/1zwge3s.png) repeat-x 0 0;
}
或者,您可以使用HTML& CSS.我做了a demo here,我添加了一个jQuery UI Slider来控制条形图.这是基本代码(仅适用于条形码)
HTML
<div class="progressbar"> <span class="progressbar-value"> <em class="progressbar-cover"></em> </span> </div>
CSS
.progressbar {
width: 25px;
height: 215px;
position: relative;
background: transparent url(http://i48.tinypic.com/290tvnk.png) no-repeat;
}
.progressbar-value {
position: absolute;
display: block;
margin: 0;
border: 0;
width: 15px;
height: 200px;
top: 7px;
left: 5px;
overflow: hidden;
text-indent: -30px;
background: #0f0 url(http://i45.tinypic.com/minc5g.png) center center;
}
.progressbar-cover {
position: absolute;
display: block;
width: 15px;
height: 200px;
border: 0;
left: 0;
bottom: 0%;
background: transparent url(http://i49.tinypic.com/1zwge3s.png) repeat-x 0 0;
}
