反正有没有jquery ui进度条显示垂直？

Question

我想要一个进度条来显示百分比填充,但我想让它像下面这样的温度计一样垂直.这可能是Jquery UI进度条上的一个选项吗？我想要一些看起来像这样的东西http://magellanband.files.wordpress.com/2009/05/fundraiser-goal-thermometer-thumb7625364.jpg

Answer 1

有一个插件,但我没有使用它,所以我不知道你是否可以适应它.

或者,您可以使用HTML和CSS制作自己的.我在这里做了一个演示,我在其中添加了一个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;
}