Animierte Wertungsbalken (JS)

Jeder kennt die Wertungsbalken, die sich langsam aufbauen, aus dem Fernsehen. Zunächst als TED bekannt geworden, dient sie heute beinah in allen Shows zur Darstellung von Umfrageergebnissen.

Das folgende Script realisiert eine solche Visualisierung. Die benötigten Dateien können hier downgeloadet werden:

• Download (JavaScript)
• Download (CSS)

Beispiel 1

Das erste Beispiel verwendet Hintergrundgrafiken, um die Wertungs- balken zu visualisieren.

Im IE kann es bei der Animation zum Flackern kommen, wenn der Seitencache nicht aktiviert ist.

Beispiel 2

Im zweiten Beispiel werden die Wertungsbalken mit einer Hintergrund- farbe gefüllt. Diese kann auch beim Aufruf geändert werden. Zu sehen im ersten Wertungsbalken - wechselt zwischen rot und orange.

Integration ins Dokument

Das Script kann mit wenigen Handgriffen in ein Dokument eingebunden werden. Die Vorgehensweise wird hier Schritt für Schritt beschrieben.

1. Script einbinden

Im head-Bereich eines (X)HTML-Dokuments wird das JavaScript eingebunden.

(+) <script src="qp_pollbars.js" type="text/javascript"></script>

2. CSS einbinden

Ebenfalls im Header wird das CSS-Dokument eingebunden. In dieser Datei können die Elemente der Wertungsbalken-Gruppe formatiert werden (siehe Abbildung).

 

Die Selektoren und Klassen im CSS-File sind mit Kommentaren versehen, um die Arbeit zu vereinfachen.

<link rel="stylesheet" type="text/css" href="qp_pollbar.css">

3. Pollobjekt instaziieren und initialisieren

Am elegantesten wird das Poll-Objekt im onload-Event instanziiert, denn zu diesem Zeitpunkt kann gewährleistet werden, dass alle Elemente geladen wurden. Damit kann auch die Existenz des Containers vorausgesetzt werden, dessen ID beim Instanziieren übergeben wird und der beim Initialisieren die Wertungselemente aufnimmt.

Soll das Poll-Objekt an einer anderen Stelle des Dokuments erstellt werden soll, so muss dort die Existenz des Container gewährleistet sein.

Im Idealfall erfolgt auch das Intitialisieren der Wertungselemente im onload-Event.

window.onload = function(){
  //  1. Pollobjekt instanziieren
  objMyPoll = new qpPoll('outerPoll', 200);
  //  2. Pollbalken initialisieren
  objMyPoll.startPoll({p_01:[0, 0, 'url(pollbar.gif) repeat-x', 'Text 1: '],
                       p_02:[0, 0, '#f00', 'Text 2: '],
                       p_03:[0, 0, '#0f0', 'Text 3: ']});
}

3.1 Syntax - Instanziieren

Die Syntax für das Instanziieren eines Pollobjekts sieht folgender- maßen aus:

object = new qpPoll(strContainerID, intBarLen);

• strContainerID
  string - ID des Containers, der die Wertungsgruppe aufnehmen soll
• intBarLen
  integer - Länge der Wertungsbalken
  (Die Breite der beschreibenden Texte wird im CSS angepasst)

3.2 Syntax - Initialisieren

Zum Initialisieren wird einfach die Methode startPoll zum Starten der Animation mit Initialwerten (Startwert=0, Endwert=0) aufgerufen. Ergebnis dieser Routine ist ein in den Container eingebundener Bereich, der alle notwendigen Elemente zur Visualisierung der Wertung enthält.

Syntax:

obj.startPoll({ id1:[start, end, 'css-str', 'txt'],
               [id2:[start, end, 'css-str', 'txt'],
                id3: ...]
              });

Der Methode wird ein Objekt übergeben, das aus mehreren Komponen- ten bestehen kann. Jede Komponente entspricht dabei einem Wertungs- balken mit zugehörigem beschreibenden Text.

Jede Objekt-Komponente besteht aus einem Eigenschaftsnamen (z.B. id1) und einem Array mit den Werten, die zur Animation notwendig sind.

• Eigenschaftsname: id1, id2 ...
  Eine Bezeichnung, die innerhalb eines Poll-Objekts eindeutig sein muss.
• start (integer/'auto')
  Gibt den Startwert (in %) für die Animation an. Mit 'auto' wird an der aktuellen Position des Wertungsbalkens fortgesetzt.
• end (integer)
  Gibt den Endwert (in %) für die Animation an.
• css-str (string) - optional
  Über diesen Wert kann das Aussehen des Wertungsbalkens ange- passt werden. Es kann z.B. eine Hintergrundfarbe '#f00' oder eine Hintergrundgrafik 'url(bild.gif) repeat-x' übergeben werden.
• txt (string) - optional
  Beschreibender Text zum zugehörigen Wertungsbalken

4. Container für Wertungselemente

Zuletzt fehlt noch ein HTML-Element, das die Wertungselemente aufnimmt. Dieser Container wird mit einer eindeutigen ID ausgezeichnet, die beim Instanziieren übergeben werden muss.

<div class="pollHolder" id="outerPoll"></div>

Animation

Sollen die Wertungsbalken animiert werden, so werden die gewünschten Werte an die Methode startPoll übergeben. Die erforderliche Syntax wurde unter 3.2 beschrieben.

Beispielaufrufe

Beispiel 1:

//  Pollbalken animieren
objMyPoll.startPoll({p_01:[0, 30, 'url(pollbar.gif) repeat-x', 'Text 1: '],
                     p_02:[0, 50, '#f00', 'Text 2: '],
                     p_03:[0, 20, null, 'Text 3: ']});

Es werden drei Balken animiert.
Der erste endet bei 30 Prozent, erhält eine Hintergrundgrafik und den Text "Text 1" zugewiesen.
Der zweite läuft bis 50 Prozent und erhält eine Hintergrundfarbe und einen Text.
Der dritte Balken erreicht 20 Prozent und erhält einen neuen Text.

Beispiel 2:

//  Pollbalken animieren
objMyPoll.startPoll({p_01:['auto', 30],
                     p_02:[50, 20],
                     p_03:['auto', 50]});
 

Erneut werden drei Balken animiert.
Der erste startet an seiner aktuellen Position und endet bei 30 Prozent. Hintergrundgrafik und Text werden beibehalten.
Der zweite läuft von 50 bis 20 Prozent.Hintergrundgrafik und Text werden beibehalten.
Der dritte Balken startet an seiner aktuellen Position und endet bei 50 Prozent. Hintergrundgrafik und Text werden beibehalten.

Browserkompatibilität

Das Script wurde in folgenden Browsern erfolgreich getestet.

• IE 5.x, 6 und 7
• Firefox 1.5 und 2
• Opera 7.54, 8.5 und 9.01
• Netscape 7.01
• Mozilla 1.5
• Konqueror 3.3

Foto: aboutpixel.de | clirix