Information Technology Reference
In-Depth Information
der Breite von der berechneten Prozentzahl angegebenen und mit grüner Hin-
tergrundfarbe gefüllt - ein einfacher Trick mit guter Wirkung. Abschließend
wollen wir noch die Google Chart API mit einbeziehen. Beim Aufruf des Web-
service müssen die Größe der Grafik (
chs
, hier
200x125
Pixel), der Typ der Gra-
fik (
cht
, hier
gom
,
Google-O-Meter
) und die darzustellenden Daten (
chd
, hier der
Prozentwert
op.value
) übergeben werden:
var google = document.getElementById("google");
google.src = "http://chart.apis.google.com/chart?chs=200x125&cht=gom&
chd=t:"+op.value;
var gSrc = document.getElementById("googleSrc");
gSrc.innerHTML = google.src;
3.3.2
Fortschrittsanzeige mit »progress«
progress
funktioniert ähnlich wie das eben vorgestellte
meter
-Element, mit
dem Unterschied, dass es den Fortschritt eines laufenden Prozesses darstellt.
Mögliche Prozesse sind ein Datei-Upload, den der Benutzer auslöst, oder der
Download von externen Bibliotheken, wenn eine Applikation diese benötigt.
Für ein kurzes Beispiel wollen wir aber keine Dateien hochladen oder große
Datenmengen herunterladen, es reicht, wenn wir uns selbst eine Aufgabe stel-
len und diese zu 100 Prozent erfüllen. Im Folgenden werden zehn Eingabe-
elemente vom Typ
checkbox
definiert, und sobald alle aktiviert sind, soll der
Fortschrittsbalken 100 % anzeigen.
<h1>Bitte aktivieren Sie alle Checkboxen</h1>
<form method=get>
<input type=checkbox onchange=updateProgress()>
<input type=checkbox onchange=updateProgress()>
<!-- und 8 weitere -->
<p>
Fortschritt: <progress value=0 max=10 id=pb></progress>
</form>
Das
progress
-Element wird mit einem Wert von
0
und einem Maximalwert von
10
initialisiert. Sobald ein Eingabeelement aktiviert wird, ruft es die Funktion
updateProgress()
auf, die wie folgt aussieht:
function updateProgress() {
var pb = document.getElementById("pb");
var ip = document.getElementsByTagName("input");
var cnt = 0;
for(var i=0; i<ip.length; i++) {
