In dieser Anleitung erkläre ich wie man einfache Fortschrittsbalken mit CSS erstellen kann, und stelle 4 JavaScript-Skripte vor mit denen sich “bewegliche” Fortschrittsbalken erstellen lassen.

Einfache Fortschrittsbalken

Fortschrittsbalken mittels CSS zu erstellen ist nicht weiter schwer, man braucht im Grunde nur zwei Elemente, die übereinander gelegt werden.

Ohne Bilder

Man erstellt ein Element, gibt ihm eine Hintergrundfarbe und weist ihm eine Breite/Höhe zu. In diesem Element erstellt man nun ein zweites Element, dem man ebenfalls eine Hintergrundfarbe (möglichst eine andere, als die vom ersten Element) und die gleiche Höhe wie dem ersten Element zu. Die Breite des zweiten Elements gibt dann an, welchen Wert der Fortschrittsbalken anzeigen soll.

<style type="text/css">
  div.fsb {
    border:1px solid #000;
    background-color:white;
    width:200px;
    height:28px;
    padding:1px;
  }
 
  div.fortschritt {
    background-color:#000;
    height:28px;
    width:50%; /* Fortschritt */
  }
</style>
<!-- [...] -->
<div class="fsb">
  <div class="fortschritt"></div>
</div>

In Aktion sieht das dann so aus: Demo.

Mit Bildern

Möchte man den Fortschrittsbalken etwas schöner gestalten, kann man natürlich auch Bilder verwenden, die Methode funktioniert eigentlich genau so. Der einzige Unterschied ist, das anstatt von Hintergrundfarben Bilder verwendet werden.

div.fsb {
    background:url('normal.png') no-repeat left center;
    width:300px;
    height:30px;
}
 
div.fortschritt {
    background:url('farbig.png') no-repeat left center;
    height:30px;
    width:50%;
}

In Aktion sieht das dann so aus: Demo.

JavaScript-Fortschrittsbalken

Mit JavaScript kann man den Fortschrittsbalken auch Leben einhauchen, bzw. den angezeigten Wert verändern. Ein einfaches JS-Skript, welches die Breite des inneren Elements ändert ist schnell geschrieben. Im folgenden stelle ich allerdings 4 Skripte/Klassen vor, die noch etwas mehr können als nur das. Das erste Skript basiert auf jQuery/jQuery UI, das zweite benötigt nur jQuery, das dritte ist für Prototype und das vierte verwendet mootools.

Ich habe für jedes Skript eine Demo erstellt: Fortschrittsbalken-Demo

jQueryUI – ProgressBar

Die JS-Bibliothek jQuery UI stellt diverse Werkzeuge und Benutzeroberflächen-Elemente bereit. Unter anderem bietet sie auch eine Klasse zur Erstellung von Fortschrittsbalken. Praktischerweise kann man auf der Download-Seite von jQuery UI direkt die Elemente angeben, die man benötigt, so braucht man nicht die ganze Bibliothek runterzuladen/einzubinden (wenn man nur den Fortschrittsbalken braucht), und spart so einiges an Speicherplatz/Datentransfer. Die Bibliothek basiert auf jQuery, dieses muss also auch eingebunden werden.

Eine Besonderheit von jQuery UI: Das Aussehen der Benutzeroberfläche (und somit des Fortschrittsbalkens) wird durch Themen festgelegt. Auf der Webseite von jQuery UI findet sich (unter Gallery) bereits eine kleine Auswahl von fertigen Themen, natürlich ist es auch möglich eigene Themen zu erstellen. Das Thema wird über eine css-Datei definiert, diese muss ebenfalls in die Seite eingebunden werden.

Einbinden

Benötigt werden: jQuery, jQuery UI (Progressbar), und ein jQuery UI Thema.

<link rel="stylesheet" href="jquery-ui/css/ui-lightness/jquery-ui-1.7.2.custom.css">
<script src="jquery-ui/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jquery-ui/js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>

(Die Pfade müssen eventuell angepasst werden.)

HTML

Man erstellt einfach ein div-Element, den Rest erledigt das Skript. Dem Element kann man noch eine ID geben, das macht es leichter es anzusprechen.

<div id="fsb"></div>

Fortschrittsbalken erstellen

Um den Balken zu erstellen, selektiert man das Ziel-Element mit der $()-Funktion, und ruft die Methode progressbar() auf. Mittels dem Parameter value kann man den Ausgangswert des Fortschrittsbalkens angeben. Außerdem kann man, wenn man möchte, mit dem Parameter change auch gleich eine Funktion festlegen, welche aufgerufen wird, wenn der Wert sich ändert. Beide Parameter sind optional.

$(function () {
    $('#fsb').progressbar({
        value:50,
        change: function () { 
            alert($('#fsb').progressbar('option', 'value') + '%');
        }
    });
});

Methoden und Ereignisse

Die Klasse bietet Methoden zum Abfragen und Ändern des angezeigten Werts, sowie ein Ereignis welches ausgelöst wird, wenn der Wert sich ändert.

// Wert aendern
$('#fsb').progressbar('option', 'value', 50);
// Wert abfragen
var wert = $('#fsb').progressbar('option', 'value');

Weitere Informationen zu der Klasse und ihren Methoden finden sich in der offiziellen Dokumentation.

jQuery – ProgressBar

Das Skript jQuery Progress Bar basiert auf jQuery und bietet einige nützliche Funktionen, die die jQuery UI-Variante nicht hat. Es ist möglich verschiedene Bilder zur Anzeige des Fortschritts zu verwenden, so kann man beispielsweise für die ersten 10-20% einen roten Hintergrund, für die nächsten 10-20% dann einen orangen, dann einen gelben und zum Schluss einen grünen Hintergrund verwenden. Es lässt sich auch festlegen ob neben dem Balken auch der Fortschritt noch einmal als Prozentzahl angezeigt werden soll, und auch eine Anzeige des genauen Wertes (123/465) ist möglich. Außerdem ist die Bewegung des Fortschrittsbalkens animiert, es lässt sich sogar die Geschwindigkeit der Animation festlegen.

Einbinden

Benötigt werden jQuery und das Skript selbst.

<script src="jquery-ui/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jquery.progressbar/js/jquery.progressbar.js" type="text/javascript"></script>

HTML

Auch bei diesem Skript wird nur ein div-Element benötigt, den Rest erstellt das Skript selbst.

<div id="fsb"></div>

Fortschrittsbalken erstellen

Erstellt wird der Fortschrittsbalken mittels der Funktion progressBar(). Dabei gibt es einige Parameter, mittels derer das Aussehen und Verhalten des Fortschrittsbalkens beeinflusst werden können:

• steps und step_duration: Geben an, wie viele Schritte beim Ändern des Anzeigewertes gegangen werden sollen, und wie lange ein Schritt dauert. (Standard: 20/20)
• max: Der max. Wert, bis zu dem der Fortschrittsbalken geht. (Standard: 100)
• showText und textFormat: Ob neben dem Balken noch der Fortschritt in Textform angezeigt werden soll, und ob dieser als Prozentzahl ('percentage' = 50%) oder als Anteil ('fraction' = 50/100) angezeigt werden soll. (Standard: true, 'percentage')
• width und height: Breite und Höhe des Fortschrittsbalkens bzw. der verwendeten Bilder.
• 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).
• boxImage: Pfad zum Bild welches den Balken umschließt.
• barImage: Pfad zum inneren Bild des Balkens. Hier kann auch ein Feld übergeben werden, falls verschiedene Bilder verwendet werden sollen (siehe Beispiel).

$(function () {
    $('#fsb').progressBar(20, {
        boxImage: 'jquery.progressbar/images/progressbar.gif',
        barImage: {
            0: 'jquery.progressbar/images/progressbg_red.gif',
            30: 'jquery.progressbar/images/progressbg_orange.gif',
            50: 'jquery.progressbar/images/progressbg_yellow.gif',
            70: 'jquery.progressbar/images/progressbg_green.gif'
        }
    });
});

Methoden und Ereignisse

Die Klasse bietet ein Ereignis (callback) und keine Methode. Will man den angezeigten Wert ändern, ruft man die Klasse einfach wieder wie folgt auf:

// Aendere Wert auf 50%.
$('#fsb').progressBar(50);

Prototype – jsProgressBarHandler

Die jsProgressBarHandler-Klasse basiert auf Prototype und steht unter der Creative Commons Attribution-Share Alike 2.5 Lizenz. Das tolle an dieser Klasse ist: Sie kann auch automatisch Fortschrittsbalken erstellen, alle span-Elemente mit der CSS-Klasse progressBar, die einen Prozentwert enthalten, werden automatisch zu Fortschrittsbalken umgewandelt. Der herkömmliche Weg über JavaScript funktioniert natürlich auch.

Einbinden der Klasse

Neben der Klasse selbst, muss auch die JavaScript-Bibliothek Prototype eingebunden werden.

<script src="js/prototype/prototype.js" type="text/javascript"></script>
<script src="js/bramus/jsProgressBarHandler.js" type="text/javascript"></script>

HTML

Die Klasse wandelt alle span-Elemente mit der CSS-Klasse progressBar automatisch in Fortschrittsbalken um.

<span class="progressBar" id="fsb">50%</span>

Möchte man den Balken selbst mittels JavaScript erstellen, benötigt man ein div-Element mit einer ID.

<div id="fsb">[Lade Fortschrittsbalken]</div>

Fortschrittsbalken erstellen

Um den Balken selbst mittels JavaScript zu erstellen, muss man nur ein Objekt der Klasse JS_BRAMUS.jsProgressBar erstellen.

var fsb = new JS_BRAMUS.jsProgressBar(
    'fsb', // ID des div-Elements
    50, // Ausgangswert (Prozent)
    {
        showText : true,
        animate : true,
        barImage : 'jsprogressbarhandler/images/bramus/percentImage_back1.png'
    }
);

Der dritte Parameter kann zur Konfiguration verwendet werden, und ist optional. Folgende Optionen gibt es:

• animate: Ob der Fortschrittsbalken animiert sein soll. (Standard: ja)
• showText: Ob der Wert neben dem Balken angezeigt werden soll (Standard: ja)
• width: Breite des Balkens. Nicht vergessen: Das Bild muss ebenfalls angepasst werden. (Standard: 120)
• boxImage: Das Bild um den Balken.
• barImage: Der Hintergrund des Balkens. Hier kann auch ein Feld mit mehreren Bildern angegeben werden, dann ändert sich der Hintergrund, wenn der Balken weiter fortschreitet.
• height: Die Höhe des Balkens. (Standard: 12)
• onTick: Funktion die bei jeder Änderung am Wert des Balkens aufgerufen wird.

Die Standardwerte sind am Anfang der jsProgressBarHandler.js definiert. Dort findet sich auch die Variable autoHook, diese kann man auf false setzen, wenn man nicht möchte, das alle span.progressBar-Elemente automatisch umgewandelt werden. Die Pfade zu den Bildern bzw. die Breite/Höhe will/muss man wahrscheinlich eh ändern.

Methoden und Ereignisse

Die Klasse hat zwei Funktionen und ein Ereignis, welches bei jeder Änderung am Wert aufgerufen wird (onTick). Mit der Funktion getPercentage() kann der aktuelle Wert abgefragt werden, mit setPercentage() kann der Wert verändert werden. Letztere Funktion akzeptiert zwei Parameter, der erste gibt den neuen Wert an, der zweite gibt an ob der Balken direkt zum neuen Wert gehen soll. Wenn man den Wert ändert, während der Balken sich noch bewegt, macht er normalerweise zuerst seine Bewegung zu Ende, bevor er zum neuen Wert geht, ist der zweite Parameter true, verwirft er alle anderen Bewegungen und bewegt sich direkt zum neuen Wert.

// Wert abfragen
var aktuellerWert = fsb.getPercentage();
// Wert aendern
fsb.setPercentage(100);

mootools – dwProgressBar

Die dwProgressBar-Klasse verfolgt einen etwas anderen Ansatz, als die vorigen beiden Klassen. Mit der Klasse können Fortschrittsbalken erstellt, und der angezeigte Wert geändert werden. Um die Animation kümmert sich die Klasse. Ansonsten können (müssen) die Fortschrittsbalken komplett selbst mittels CSS gestaltet werden.

Einbinden der Klasse

Die JavaScript-Bibliothek mootools wird vorausgesetzt. Außerdem muss natürlich die Klasse selbst eingebunden werden.

<script src="mootools-1.2.3-core-yc.js" type="text/javascript"></script>
<script src="dwprogressbar.js" type="text/javascript"></script>

HTML und CSS

Es wird nur ein div-Element benötigt.

<div id="fsb"></div>

Die Gestaltung des Fortschrittsbalkens übernimmt die Klasse nicht, das muss man selber machen. Es gibt drei Elemente, die gestaltet werden können: Der Rahmen, der Balken, und der Text (optional). Beim Erstellen des Fortschrittsbalkens kann angegeben werden, welche ID die Elemente bekommen sollen, über die ID können die Elemente dann mittels CSS gestaltet werden.

Ohne Bilder

Die CSS-Selektoren für einen Fortschrittsbalken ohne Bilder (aber mit Text) könnten z.B. so aussehen:

#rahmen {
	border:1px solid #8C2229;
	width:200px;
	height:20px;
	padding:1px;
	display:inline-block;
}
 
#balken {
	background:#8C2229;
	height:20px;
}
 
#text {
	font-size:16px;
	line-height:20px;
	vertical-align:top;
	padding-left:10px;
	display:inline-block;
}

Mit Bildern

Wenn man den Fortschrittsbalken mit Bildern gestalten möchte, kann man folgende CSS-Selektoren verwenden. Die Höhen- und Breitenangaben müssen natürlich angepasst werden.

#rahmen {
	background:url('rahmen.png') right center no-repeat;
	width:300px;
	height:30px;
}
 
#balken {
	background:url('balken.png') left center no-repeat;
	height:30px;
}

Den Fortschrittsbalken erstellen

Zum Erstellen des Fortschrittsbalkens wird einfach ein neues dwProgressBar-Objekt erstellt.

window.addEvent('domready', function() {
    var fsb = new dwProgressBar({
        // Das Element, in dem der Fortschrittsbalken angezeigt wird
        container: $('fortschrittsbalken'),
        // Startwert (Prozent)
        startPercentage: 50,
        // Geschwindigkeit/Dauer der Animation (in Millisekunden)
        speed: 1000,
        // Die ID des Rahmens
        boxID: 'rahmen',
        // Die ID des Balkens
        percentageID: 'balken',
        // Wieviel Prozent pro Schritt (dwProgressBar.step() geht
        // immer einen Schritt weiter, in diesem Beispiel also 10%.
        step: 10,
        // Erlaube Werte jenseits 100%
        allowMore: false,
        // Prozentwert als Text anzeigen?
        displayText: true,
        // ID für das Textelement
        displayID: 'text',
        // Ereignis, welches aufgerufen wird, wenn der Balken 100%
        // erreicht.
        onComplete: function () {
            alert("Fertig!");
        },
        // Ereignis welches nach jeder abgeschlossenen Änderung am
        // Wert aufgerufen wird. (Wenn man von 10% auf 50% geht,
        // wird es einmal aufgerufen, nämlich wenn 50% erreicht sind.)
        onChange: function () {
            alert("Wert geändert!");
        }
    });
});

Es müssen nur die Optionen container, boxID und percentageID angegeben werden, der Rest ist optional.

Funktionen und Ereignisse

Die Klasse bietet die Funktionen set(neuerwert) und step(), außerdem die Ereignisse onComplete und onChange. Die Ereignisse sind im obigen Beispielquelltext bereits erklärt.

// Wert auf 100% setzen
fsb.set(100);
// Einen Schritt weitergehen (um options.step Prozent)
fsb.step();

Zum Schluss noch einmal die Demo-Seite für die JavaScript-Fortschrittsbalken: Fortschrittsbalken-Demo

Eine Lösung wäre, dass man eine Schaltfläche erstellt, mittels derer der Benutzer weitere Eingabefelder hinzufügen kann. Neben den zusätzlichen Eingabefeldern erstellt man dann einfach noch jeweils eine Schaltfläche zum Entfernen des Eingabefeldes, falls der Benutzer es sich anders überlegt.

Eine andere Möglichkeit wäre, das der Benutzer nur ein Eingabefeld, und eine Liste von ausgewählten Dateien hat. Nachdem eine Datei ausgewählt wurde, wird kommt die Datei in die Liste, und das Eingabefeld ist wieder leer, für die nächste Datei. Eigentlich wird das Eingabefeld dabei durch ein neues ersetzt, und das alte unsichtbar gemacht. Für den Benutzer sieht es aber so aus, als würde er die ganze Zeit dasselbe Eingabeelement benutzen.

Weitere Eingabefelder hinzufügen

Mittels der JavaScript-Funktion document.createElement(element) können dynamisch neue Elemente erstellt werden, diese können dann mit Funktionen wie appendChild, insertBefore, o.Ä. an beliebiger Stelle eingefügt werden.

Um eine Schaltfläche zum Hinzufügen zusätzlicher Eingabefelder zu erstellen, braucht man zuerst ein Verweis-Element, oder irgendein anderes Element, mittels dem der Benutzer das neue Eingabefeld hinzufügt. Damit das funktioniert, weist man dem onlick-Attribut eine Funktion zu, die ein neues Eingabefeld erstellt und im Dokument einfügt. Diese Funktion könnte zum Beispiel so aussehen:

function hinzu(element) {
    var neu = document.createElement('div');
    neu.innerHTML = '<input type="file" class="datei" name="datei[]" />';
    element.parentNode.parentNode.appendChild(neu);
}

Mittels parentNode greift man auf den Elternknoten des Elementes zu. Im Beispiel wird das neue div-Element welches das Eingabeelement enthält am Ende vom form-Element eingefügt.

<form>
  <div>
    <input type="file" class="datei" name="datei[]" />
    <a href="#" class="hinzu" onclick="hinzu(this); return false;">Datei hinzufügen</a>
  </div>
<!-- An dieser Stelle werden neue Eingabeelemente eingefügt, wenn auf den
    Verweis geklickt wird. Also z.B. so: -->
  <div>
    <input type="file" class="datei" name="datei[]" />
  </div>
<!-- Ende -->
</form>

Der Benutzer soll die hinzugefügten Eingabeelemente aber auch wieder entfernen können, dazu fügt man zu jedem Element noch eine Schaltfläche zum Entfernen hinzu. Dieser weist man eine JavaScript-Funktion zu, die das Elternelement (und somit auch alle Elemente darin) löscht. Der komplette Quelltext könnte (aufs nötigste reduziert) so aussehen:

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Mehrere Dateien flexibel hochladen</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript">
      function hinzu(element) {
        var neu = document.createElement('div');
        neu.innerHTML = '<input type="file" class="datei" name="datei[]" /> \
          <a href="#" class="weg" onclick="loeschen(this); return false;">entfernen</a>';
        element.parentNode.parentNode.appendChild(neu);
      }
 
      function loeschen(element) {
        element.parentNode.parentNode.removeChild(element.parentNode);
      }
    </script>
  </head>
  <body>
    <form>
      <div>
        <input type="file" class="datei" name="datei[]" />
        <a href="#" class="hinzu" onclick="hinzu(this);">Datei hinzufügen</a>
      </div>
    </form>
  </body>
</html>

Auf der Demo-Seite sieht man das Skript auch in Aktion.

Demo

Eingabefeld + Liste

Ein einzelnes Eingabefeld, und eine Liste ausgewählter Dateien zu erstellen ist schon etwas komplizierter. Zum Glück haben sich schon andere die Arbeit gemacht. Es gibt sowohl für mootools, als auch für jQuery entsprechende Erweiterungen.

Für jQuery

Für jQuery gibt es das jQuery Multiple File Upload Plugin. Es bietet zusätzlich noch die Möglichkeit die verwendbaren Dateitypen einzuschränken und eine maximale Anzahl von Dateien anzugeben.

Einbinden und Benutzen

Zuerst müssen jQuery und die Erweiterung im head-Bereich eingebunden werden. Außerdem gibt es noch drei weitere (optionale) Erweiterungen, mit denen die Multi File Upload Erweiterung zusammenarbeiten kann: MetaData, BlockUI, und Form. Ersteres ermöglicht es das Element direkt über das class-Attribut des input-Elements zu konfigurieren, mit BlockUI werden schönere Fehlermeldungen angezeigt, und Form ermöglicht das Absenden des Formulars mittels AJAX.

<!-- jQuery wird vorausgesetzt. -->
<script src="jquery.js" type="text/javascript"></script>
<!-- Die Erweiterung selbst. -->
<script src="jquery.MultiFile.js" type="text/javascript"></script>

Anschließend muss nur noch das input-Element entsprechend angepasst werden:

<input type="file" accept="png|gif|jpg|xcf" class="multi" maxlength="3" name="bild" />
<!-- oder -->
<input type="file" class="multi accept-png|gif|jpg|xcf max-3" name="bild" />

Die Klasse multi sorgt dafür, das die Erweiterung sich dem Element annimmt. Mittels maxlength/accept lassen sich noch die max. Anzahl Dateien bzw. die akzeptierten Dateitypen festlegen.

Alternativ ist es auch möglich das Element mittels einer JavaScript-Funktion umzuwandeln. Dabei können außerdem noch einige weitere Parameter angegeben werden.

$(function() {
    $('input.datei').MultiFile({
        list: '#liste',
        max: 3,
        afterFileRemove : function (e, v, m) { alert("Datei entfernt!"); },
        afterFileSelect : function (e, v, m) { alert("Datei hinzugefügt!"); },
        STRING: { file: '<em title="Zum entfernen hier klicken" \
                         onclick="$(this).parent().prev().click()">$file</em>',
                  remove: '<img src="entfernen.png" alt="X" \
                           style="height:24px; width:24px; \
                           vertical-align:middle;border:0;" />'
        }
    });
});

So lässt sich beispielsweise festlegen, in welchem Element die Liste der ausgewählten Dateien angezeigt wird und welche Texte für die Fehlermeldungen verwendet werden. Außerdem können Funktionen angegeben werden die beispielsweise beim Auswählen oder Entfernen einer Datei ausgeführt werden.

Ausführlichere Informationen und einige weitere Beispiele finden sich auf der Webseite der Erweiterung.

Webseite: jQuery Multiple File Upload Plugin
Demo

Mit mootools

Für mootools gibt es ebenfalls eine Erweiterung.

Einbinden und Benutzen

Um diese Erweiterung zu benutzen, müssen zuerst mootools und die Erweiterung selbst eingebunden werden.

<script src="mootools-1.2.3-core-yc.js" type="text/javascript"></script>
<script src="Stickman.MultiUpload.js" type="text/javascript"></script>

Das input-Element braucht keine bestimmte Klasse.

<form id="formular">
    <input type="file" name="datei" />
</form>

Nun muss nur noch ein MultiUpload-Objekt erstellt werden.

window.addEvent('domready', function() {
    new MultiUpload($('formular').datei, 3, '[]', true, true);
});

Der erste Parameter ist das input-Element, die folgenden 4 Parameter sind optional:

• Maximale Anzahl von Dateien (Standard: 0/unlimitiert).
• Was an den Namen des Elements angehangen wird (Standard: _{id}).
• Pfad anzeigen? (Standard: nein).
• Leeres Element entfernen, bevor das Formular abgeschickt wird? (Standard: ja).

Die Liste der ausgewählten Dateien lässt sich mittels CSS umgestalten.

Auch für diese Erweiterung habe ich wieder eine Demo-Seite eingerichtet:

Demo ]]> http://www.antusblog.de/2009/07/22/mehrere-dateien-flexibel-hochladen/feed/ 3