jquery - 有没有办法让 jquery ui 进度条垂直显示？

Question

我想要一个进度条来显示百分比填充，但我想让它像下面的温度计一样垂直。这可以通过 Jquery UI 进度条上的选项实现吗？我想要类似 this http://magellanband.files.wordpress.com/2009/05/fundraiser-goal-thermometer-thumb7625364.jpg 的东西

Answer 1

有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;
}