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

Question

我想要一个进度条来显示percentfilled，但我想使它像下面的温度计一样垂直。这是可能的JQuery UI进度条上的选项？我想要的东西看起来像this http://magellanband.files.wordpress.com/2009/05/fundraiser-goal-thermometer-thumb7625364.jpg

Answer 1

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

或者，你可以使用HTML自制HTML & CSS。我制作了a demo here，我添加了一个jQuery UI滑块来控制栏的外观。这是基本的代码（只是为酒吧）

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。它允许垂直和水平方向。为了更贴近您的照片，我对代码进行了一些修改。 这里是你如何使用它：

1. HTML

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

2. CSS

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

3. 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 1，您需要更改jquery ui进度条源代码，包括CSS/JS。8，你可以参考这个演示在这里：如果你使用其他jQuery UI的版本

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

，则需要修改代码相应