JavaScript Aktuellen Wert von Fortschrittsbalken ausgeben

[Cave Johnson]

Hi,

ich bastel gerade an einem Fortschrittsbalken, und zwar "jQuery – ProgressBar" von hier (Demo; die Variante mit zwei Balken).

Das ganze funktioniert auch soweit, nur möchte ich gerne eine Rückmeldung, wenn der Balken bei 100 % ist:

$(function () {
    $('#fsb').progressBar(100, {
        boxImage: 'progressbar.gif',
        barImage: {
            0: 'progressbg_red.gif',
            25: 'progressbg_orange.gif',
            50: 'progressbg_yellow.gif',
            75: 'progressbg_green.gif'
        }
    });
});

Dort steht ja auch:

callback: Legt eine Funktion fest, welche aufgerufen wird, wenn sich der Balken bewegt. Die Funktion bekommt ein Argument mitgeliefert, welches das config-Feld, erweitert um die Werte increment (um wie viele Pixel hat sich der Balken bewegt), running_value (aktueller Wert) sowie value (Ziel-Wert).

Aber wie muss ich das einbauen, damit ich running_value und value bekomme?

Ich würde quasi dann weitermachen mit:

if(running_value == value) tue etwas

 

[Yuuri]

Du fügst den Attributen einfach ein callback: function(...) {...} hinzu und reagierst entsprechend.

Die Entwicklerkonsole hilft dir auch bei Vielem weiter.

 

[Cave Johnson]

Ah ok, ich dachte ich kann von außen irgendwie drauf zugreifen, so wie in der Demo über Links die Werte geändert werden. Aber da hieß es immer, "value" nicht definiert o.ä.

Danke schön.

----------------------------------------

edit: Jetzt brauch ich noch mal Hilfe.


Das mit dem Fortschrittsbalken klappt soweit, allerdings nur beim ersten Aufruf. Ich hab bspw. zwei Links um den Fortschrittsbalken zu starten, allerdings ist das Script nach dem ersten Aufruf fertig und beim zweiten Link tut sich somit nichts mehr.

Wie kann ich das ganze denn "zurücksetzen"? Habe mal ein Beispielscript erstellt. Mit jedem Klick auf einen der beiden Links, soll der Fortschrittsbalken also neu starten.

Ich dachte ja, ich könnte den Baklen nach dem click-Event einfach auf 0 setzen, aber das tut nicht das, was ich will.

$('a.fsb').click(function(event) {
  $('#fsb').progressBar(0);

 

[Yuuri]

Ersetz mal den Callback mit

if (data_gesamt.running_value == 100) {
	$('#fsb').hide();
	$('#fsb').progressBar(0);
	$('body').append( $('<p>').text( 'Download fertig' ) );
}

Es ist ja nicht so, dass dein div #fsb so unverändert bleibt, sondern darin wird dann die ProgressBar mit seinen Elementen aufgebaut. Du zerstörst dort im Prinzip die komplette ProgressBar und ersetzt diese durch einen Link, wodurch dann natürlich nichts mehr funktioniert. Du müsstest höchstens nochmal nachsehen, wie man die Animation On-The-Fly ersetzt, denn beim Zurücksetzen dieser und beim Klicken des zweiten Links, steht diese ja nicht sofort auf 0 %. Das Ergebnis wirst du dir sicherlich denken können.

 

[Cave Johnson]

Okay, den Link lass ich aber in einem zweiten identischen Div anzeigen.

Ist zwar nicht elegant, aber es klappt.

Danke nochmals.