如何顯示大於100％的進度條

我想使用jquery ui進度條顯示每日總計的pct。就我而言，你實際上可以覆蓋分配的總數。（因爲我顯示完成了一定的距離，並且實際上可以超過所需的距離。此工具是否支持超過100％的值，或者是否有任何其他GUI工具可以執行此類操作？如何顯示大於100％的進度條

來源

2010-05-01 leora

+14

這些去11.那一個更響亮，innit？ – 2010-05-01 12:59:13

根據涉及的數量，如何將比例尺變爲非線性，並使其成爲例如logarythmic？ Yout然後結束了一個根據值的大小以不同的速度移動的酒吧......如果你定義任何100％爲酒吧的2/3碼，你可以看到一個超限，但仍然在範圍內進度條。如果你超過了進度條的尺寸，那麼它使得UI難以設計和維護。...

來源

2010-06-02 16:13:55 JohnnyJP

您可能最好將兩個進度條並排放置，將第一個綠色和第二個進行紅色着色，左側進度條爲0-100％，紅色爲100-任何％

來源

2010-05-01 12:38:36 NibblyPig

與分配太多空間刻錄CD時相同。 – labilbe 2010-05-29 16:14:21

啊，我想的是一樣的，除了我會把第二個放在第一個之上，所以它重疊。另外，如果你讓底部看起來像火一樣，然後頂部看起來像一串鐵絲網，這將是非常糟糕的屁股。 – 2010-06-04 08:31:36

我還沒有測試過這個，但是酒吧本身有自己的類，ui-progressbar-value所以如果你把進度條放到div myDiv你可以設置手動寬度是這樣的：

$('#myDiv .ui-progressbar-value').width('120%')

，或者如果你想製作動畫：

$('#myDiv .ui-progressbar-value').animate({width:'120%'}, 'fast')

在這裏的例子：http://jqueryui.com/demos/progressbar/#theming，寬度爲37％，所以我認爲這是可行的。

來源

2010-05-29 15:58:00 colinmarc

120％是其父母的大小的120％，而不是它自己的當前大小，所以雖然調整它的大小可能會起作用（我不知道），但您的確切示例將調整爲無關大小。 – Jasper 2010-06-03 16:42:28

@Jasper我很確定這是小部件應該如何工作的。 .ui-progressbar-value在.ui-progressbar裏面，所以它應該可以正常工作。對不起，如果這不清楚我的答案。 myDiv位只是爲了您可以選擇正確的進度條。 – colinmarc 2010-06-03 17:45:16

我現在看到，你是絕對正確的，我只是錯了，對不起 – Jasper 2010-06-03 20:32:39

進度條的當前jQuery實現不允許超出範圍從0到100範圍內的值。我一直致力於該插件的替換實現，該插件可以在http://github.com/azatoth/jquery-ui/tree/progressbar處找到，但我尚未實現任何可視化範圍超過100％的功能，但這是一個不錯的主意，我可能會實現一個選項來顯示不同的範圍。此時任何輸入範圍重新計算在100％範圍內。

來源

2010-05-29 16:42:43 azatoth

有可能有一些方法可以做到這一點，但你將不得不修改jquery，這是我wouldn不推薦。相反，我會建議嘗試「僞造」類似的結果。一種方法是 - 如SLC所述 - 簡單地將兩個進度條相鄰放置。

不過，我想我會用覆蓋層代替。例如，首先你有一個帶有白色背景和綠色條的進度條，但要顯示120％，則只需使用帶有綠色背景和20％紅色條的進度條。也許一個代碼示例會更清楚：

<html> 
<head> 
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 

    <script> 
    var val = 40; 

    $(document).ready(function() { 
     $("#progressbar").progressbar({ value: val }); 
     $("#plusTen").bind("click", function() 
     { 
     setValue($("#progressbar"), val + 10); 
     val += 10; 
     }); 

     $("#minusTen").bind("click", function() 
     { 
     setValue($("#progressbar"), val - 10); 
     val -= 10; 
     }); 
    }); 

    function setValue(bar, value) 
    { 
     if (value > 100) 
     { 
     value -= 100; 
     bar.removeClass("belowMax"); 
     bar.addClass("aboveMax"); 
     } 
     else 
     { 
     bar.removeClass("aboveMax"); 
     bar.addClass("belowMax"); 
     } 

     bar.progressbar("option", "value", value); 
    } 

    </script> 

    <style type='text/css'> 
    #progressbar.aboveMax.ui-progressbar 
    { 
     background-image: none; 
     background-color: #00FF00; 
    } 

    #progressbar.aboveMax .ui-progressbar-value 
    { 
     background-image: none; 
     background-color: #FF0000; 
    } 

    #progressbar.belowMax.ui-progressbar 
    { 
     background-image: none; 
     background-color: #FFFFFF; 
    } 

    #progressbar.belowMax .ui-progressbar-value 
    { 
     background-image: none; 
     background-color: #00FF00; 
    } 
    </style> 

</head> 
<body style="font-size:62.5%;"> 

    <div id='progressbar' class='belowMax'></div> 
    <br /> 
    <input type='button' value='+10' id='plusTen' /> 
    <input type='button' value='-10' id='minusTen' /> 

</body> 
</html>

來源

2010-06-03 16:51:46 Jasper

就個人而言，我只想推出自己的...這是一個完全基於CSS的，我只使用jQuery UI滑塊the demo。

HTML（注：類添加到匹配jquery ui類，但沒有ui-progressbar-text類，我知道）。

<div id="progressbar" class="ui-progressbar ui-widget ui-widget-content ui-corner-all"> 
<div class="ui-progressbar-value ui-widget-header ui-corner-left"> 
    <span class="ui-progressbar-text">10%</span> 
</div> 
</div>

CSS

.ui-progressbar { 
height: 20px; 
width: 50%; 
border: silver 4px solid; 
margin: 0; 
padding: 0; 
} 
.ui-progressbar-value { 
height: 20px; 
margin: 0; 
padding: 0; 
text-align: right; 
background: #080; 
width: 10%; 
} 
.ui-progressbar-text { 
position: relative; 
top: -3px; 
left: 0; 
padding: 0 5px; 
font-size: 14px; 
font-weight: bold; 
color: #000; 
}

來源

2010-06-04 14:33:14 Mottie

非常好。這應該是被接受的答案。 – Fr0zenFyr 2013-11-21 07:57:55

哦，你是個天才。我怎樣才能給+10？我修改了一下你的小提琴以節省空間http://jsfiddle.net/Z6k3C/86/ – Fr0zenFyr 2013-11-21 10:22:46

一個進度條，當你可以預測一個任務將結束一個好主意。
例如，使用字節下載文件。

鑑於您的情況具有所需的實際距離，我建議您使用格式化文本框來代替進度條。

這裏有兩個例子：
實際距離：4.5
實際距離的3.4：4.5的

4.7你可以用顏色播放或添加圖標來表示，當你超過必要的距離。

來源

2010-06-05 15:21:16 Zamboni

如何顯示大於100％的進度條

回答

相關問題