gibt es sowieso jquery ui progress bar vertikal zeigen?

Question

Ich möchte einen Fortschrittsbalken zeigen Prozent, aber ich möchte es vertikal wie ein Thermometer wie folgt machen. Ist dies mit einer Option in der Fortschrittsleiste der Jquery-Benutzeroberfläche möglich? Ich möchte etwas, das aussieht wie this http://magellanband.files.wordpress.com/2009/05/fundraiser-goal-thermometer-thumb7625364.jpg

Answer 1

Es gibt a plugin, aber ich habe es nicht verwendet, also weiß ich nicht, ob Sie es anpassen können.

Oder Sie könnten nur Ihre eigenen mit HTML & CSS. Ich machte a demo here, wo ich einen jQuery UI Slider hinzugefügt, um das Aussehen der Leiste zu steuern. Hier ist die grundlegende Code (nur für die Bar)

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

Es gibt keine Option, aber es wäre einfach, das Widget zu ändern, um zu tun, was Sie wollen. Die progressbar source ist klar, ändern Sie einfach die _refreshValue() -Funktion an der Unterseite und fiddle mit der CSS ein wenig. Viel Glück!

Answer 3

ich diesen plugin gefunden haben. Es ermöglicht vertikale und horizontale Ausrichtung. Ich habe einige Änderungen für den Code vorgenommen, um näher an Ihrem Bild zu sein. Hier ist, wie Sie es verwenden können:

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

Sie müssen die Plugin und dann script einfügen, die alle anderen Mitarbeiter verwendet. Ich habe die demo geändert, die auf der Plugin-Website angegeben wird, um rot, vertikal und es auf 100% zu stoppen. Hier sind die Änderungen:

den Fortschritt zu stoppen nicht diese Anwendung zurück:

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

Die ursprüngliche Version füllt die Fortschrittsbalken von oben nach unten, damit ich es wie folgt umgekehrt:

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

Sie können auch einen Blick auf den Code einen schöneren Weg dafür finden. Mit den Variablen lr, lg, lb wird ein Gradient der Füllfarbe gesetzt. Wenn Sie das verwenden möchten, sollten Sie die Werte der Variablen r, g, b in der Datei default.js als Anfangsfarbe ändern. Wenn Sie möchten, dass der Fortschrittsbalken mit einer anderen Form aussieht, z. B. Thermometer wie auf dem Bild, das Sie angegeben haben, können Sie das leere Thermometer als Hintergrund und darüber das Div, das gefüllt wird, setzen.

Answer 4

Sie müssen den jquery ui Fortschrittsbalken-Quellcode ändern, einschließlich CSS/JS, wenn Sie jquery ui 1 verwenden.8, können Sie auf dieser Demo finden Sie hier:

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

Wenn Sie andere jQuery UI-Version verwenden, müssen Sie den Code entsprechend