反正有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

，則需要修改代碼相應