jquery Progressbar

[Bribea]

Hallo tutorials-Leser,

Suche seit ca 2 Stunden im Netz und bin bisher noch nicht fündig geworden.
Ich benötige eine Progressbar mit 3 Werte:

Current: aktuelle Zahl
Leer: Null
Voll: aktuelle Größe

Und zwar soll die Bar sich mit der Zeit füllen jedoch verändert sich der "Voll"-Wert sowie die aktuelle Anzahl, allein der "Leer"-Wert ist immer Null (0).

Ziel ist es eine Leiste zu sehen die Prozentual anzeigt wieviel Einheiten sich aktuell im Lager befinden.

Beispiel: 5000/10000 = Bar bei 50%

Hoffe hier kann mir einer weiterhelfen, danke im vorraus!

Grüße

Bribea

 

[merzi86]

Woher kommen denn die Werte, also das aktuelle Bestand und die Maximalwert?

Wie willst du die Werte darstellen??
Eine Art Balkendiagramm oder reiner Text?

 

[Bribea]

Die Werte kommen aus der DB per Variable ($coin)
Der Max-Wert ebenfalls aus der DB mit $maxstore

Werte sollen garnicht dargestellt werden, sondern jeglich eine Leiste (evtl mit % Angabe) die sich Anhand der Werte füllt und leert. (Ressourcenleiste)

 

[meste]

Hy,
probier mal (nicht getestet).

Das Beispiel veranschaulicht dir den Ablauf.
In der Methode "setValue" wird der Value vom Progressbar gesetzt und anschließend Prozentual angezeigt.

<script>
function load(data){
    for(var i = 0; i < data.length; i++){
        setValue(i, data.Wert, data.MaxWert);
    }
}
function setValue(idx, curr, max) {
     $( "#pb" + idx).progressbar({
         value: curr;  // Progressbar Value zuweisen
     });
    $("#lbl" + idx).val(parseInt(parseInt(curr / max) * 100) + "%"); // Prozentanzeige
};
</script>

Hoffe das hilft dir

 

[meste]

sry, habe die Antwort von merzi86 erst nach dem veröffentlichen gesehen.

 

[merzi86]

Der Ansatz von meste ist ein direkter mit JQuery und Progressbar.
An anderer wäre dieser hier, der vor ein paar Tagen im CSS-Board war (hier zu finden ).

Dazu könntest du den Style wert für width neu setzen und damit den Fortschritt darstellen.

 

[Bribea]

Hab mir den Thread mal angeschaut jedoch wüsste ich Beispielsweise nicht, wie ich bei dem Beispiel hier: http://jsfiddle.net/730606es/ den Ablauf gestalten soll..
Da ja 2 Werte aus der Datenbank geholt werden die Werte geben dann 2 Ganzzahlen aus (Current und MaxStorage).. Da die Currentanzahl im Sekundentakt aktualisiert wird, sollte die Bar sich auch sekündlich füllen oder falls halt Coins ausgegeben werden wieder zurück aber das wird ja mit der currentzahl/maxstorage berechnet.

Die Leiste soll halt den Aktuellen Lagerbestand als Leiste wiedergeben ähnlich wie bei einer Progressbar

 

[merzi86]

Du könntest einen Ajax-Request absetzen, den Prozentualen-wert auf dem Server berechnen lassen (egal ob PHP oder MySQL) und diesen dann an den Client senden.
Das Script setzt die Antwort nicht als dargestellten Text, sondern als Style-Attribut für den Progressbar.

 

[Bribea]

Das Ganze soll zum Schluss so wie auf dem Beispiel funktionieren, leider weiß ich nicht ganz wie ich das mit Ajax umsetze, da JS,Ajax, jquery Neuland ist
Ist es denn aber mit dem Script von meste möglich?

 

[Jan-Frederik Stieler]

Hi,
hier hatten wir für jemanden schon sowas erstellt gehabt.
Ich hatte dann noch mit etwas jQuery die Balkenbreite anhand des gesetzten Wertes ausgelesen. Den Wert kann man ja bei dir aus der Datenbank in eine Var schreiben und dann an jQuery übergeben.
http://jsfiddle.net/730606es/

Grüße