Question

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

的东西

Answer 1

有a plugin，但我没有使用它，所以我不知道你是否可以适应它。

或者，您可以使用HTML＆amp; 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;
}

Answer 2

目前没有选项，但很容易修改小部件以执行您想要的操作。 progressbar source很清楚，只需更改底部的_refreshValue（）函数并稍微调整一下css即可。祝你好运！

Answer 3

我找到了plugin。它允许垂直和水平方向。我对代码进行了一些修改，以便更接近你的图片。以下是如何使用它：

HTML

<div class="percentBar jProgressBar_Red"></div>
CSS

.jProgressBar_Red .border { background-color: #000000; } .jProgressBar_Red .border .background { background-color: red; } .jProgressBar_Red .border .background .bar { background-color: #ffffff; }
的jQuery

您必须包含使用所有其他工作人员的Plugin和script。我修改了插件网站上给出的demo，以便为红色，垂直，并在100％停止。以下是更改：

要停止进度而不重置，请使用此选项：

function incPercent() {
    percentDone = percentDone + 1;
    if (percentDone > 100) {
        percentDone = 100;
    }
    setPercent();
}

原始版本从上到下填充进度条，所以我将其反转为：

function setPercent() {

    bar.setPercent(100-percentDone); //set the progress
    percentText.text(100-percentDone); //set the text (i.e. "xx%")

    //make the bar gradually "whiter" as it approches 100%      
    var lr = Math.floor( (255-r)* 0.8 * percentDone / 100 + r);
    var lg = Math.floor( (255-g)* 0.8 * percentDone / 100 + g);
    var lb = Math.floor( (255-b)* 0.8 * percentDone / 100 + b);

    //change the bar color of the bottom bar
    //note: calling jProgressBar here simply casts the jQuery object as a jProgressBar object
    bar.eq(1).jProgressBar().setBarColor("#" + lr.toString(16) + lg.toString(16) + lb.toString(16));
}

您还可以查看代码，找到更好的方法。变量lr，lg，lb用于绘制填充颜色的梯度。如果要使用它，则应将default.js文件中的r，g，b变量的值更改为开始颜色。如果您希望进度条看起来具有不同的形状，例如您提供的图像上的温度计，您可以将空温度计作为背景，并在其上方填充要填充的div。

Answer 4

你需要更改jquery ui进度条源代码，包括CSS / JS，如果你使用jquery ui 1.8，你可以在这里参考这个演示：

http://www.gbtags.com/gb/demoviewer/2001/e6a59fd7-c183-46cc-af2c-e3792c1c7f34/index.html.htm

如果您使用其他jQuery UI版本，则需要相应地修改代码

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

4 个答案: