gibt es irgendwie zu haben Jquery Ui Fortschrittsbalken zeigen bis vertikal?

Question

Ich möchte einen Fortschrittsbalken zu zeigen, Prozent gefüllt, aber ich möchte es vertikal wie ein Thermometer wie diese unten zu machen. ist dies möglich mit einer Option auf Jquery UI Fortschrittsbalken? Ich möchte etwas, das aussieht wie diese http://magellanband.files.wordpress.com/2009/05/fundraiser-goal-thermometer-thumb7625364.jpg

Answer 1

Es gibt ein Plugin aber ich habe es nicht verwendet und weiß daher nicht, ob man es anpassen kann.

Sie können aber auch einfach Ihre eigene Seite mit HTML und CSS erstellen. Ich habe eine Demo hier wo ich einen jQuery UI Slider hinzugefügt habe, um das Aussehen der Leiste zu steuern. Hier ist der grundlegende Code (nur für die Leiste)

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

Derzeit gibt es keine Option, aber es wäre einfach, das Widget so zu ändern, dass es das tut, was Sie wollen. Die Quelle der Fortschrittsanzeige ist klar, ändern Sie einfach die Funktion _refreshValue() am unteren Rand und fummeln Sie ein wenig am CSS. Viel Glück!

Answer 3

Ich habe Folgendes gefunden Plugin . Sie ermöglicht eine vertikale und horizontale Ausrichtung. Ich habe einige Änderungen am 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 Skript die alle anderen Mitarbeiter in Anspruch nimmt. Ich habe das System geändert Demo die auf der Plugin-Seite angegeben ist, um rot zu sein, vertikal und es stoppt auf der 100%. Hier sind die Änderungen:

Um den Fortschritt zu stoppen und nicht zurückzusetzen, verwenden Sie dies:

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

Die Originalversion füllt den Fortschrittsbalken von oben nach unten aus, also habe ich ihn so umgedreht:

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 werfen und einen viel schöneren Weg dafür finden. Die Variablen lr,lg, lb werden verwendet, um einen Farbverlauf der Füllfarbe zu erzeugen. Wenn Sie das verwenden wollen, sollten Sie die Werte der Variablen r,g,b in der Datei default.js so ändern, dass sie die Anfangsfarbe sind. Wenn Sie möchten, dass der Fortschrittsbalken eine andere Form hat, z. B. ein Thermometer wie auf dem Bild, das Sie zur Verfügung gestellt haben, können Sie das leere Thermometer als Hintergrund und darüber das Div, das sich füllen soll, einfügen.

Answer 4

Sie müssen den jquery ui progress bar Quellcode ändern, einschließlich CSS/JS, wenn Sie jquery ui 1.8 verwenden, können Sie auf diese Demo hier beziehen:

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

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

Answer 5

Vielleicht das CSS-Attribut setzen: transform: rotate(-90deg); eine Lösung wäre? Was auf dem Fortschrittsbalken übrig geblieben ist, wird unten stehen.

HTML

<div id="signal_bar" style="display: inline-block; width: 20px; height: 8px; transform: rotate(-90deg); margin:0px"></div>

Javascript

(#signal_bar).progressbar({ value: 67 });