English
Diese Seite zeigt Beispiele für die Anwendung des „Application-Scripts“. Wenn Sie letzteres mit in Ihre Seite aufnehmen (siehe Schnelleinstieg), dann müssen Sie keine einzige Zeile JavaScript schreiben, sondern lediglich Ihren die Prozentwerte enthaltenden Elementen bestimmte CSS-Klasen zuordnen. Das Application-Script fügt dann automatisch entsprechende Tortengrafiken in die Elemente ein.
Default-Modus:
<span class="progresspie">100</span> %
0 % 5 % 25 % 42 % 50 % 65 % 80 % 99 % 100 %
<span class="progressring">100</span> %
0 % 5 % 25 % 42 % 50 % 65 % 80 % 99 % 100 %
Vordefinierte Farb-Modi
Color mode (dynamische Farben)
<span class="progresspie color">100</span> %
0 % 5 % 25 % 42 % 50 % 65 % 80 % 99 % 100 %
<span class="progressring color">100</span> %
0 % 5 % 25 % 42 % 50 % 65 % 80 % 99 % 100 %
Green mode (statisch grüne Farbe)
<span class="progresspie green">100</span> %
0 % 5 % 25 % 42 % 50 % 65 % 80 % 99 % 100 %
<span class="progressring green">100</span> %
0 % 5 % 25 % 42 % 50 % 65 % 80 % 99 % 100 %
Red mode (statisch rote Farbe)
<span class="progresspie red">100</span> %
0 % 5 % 25 % 42 % 50 % 65 % 80 % 99 % 100 %
<span class="progressring red">100</span> %
0 % 5 % 25 % 42 % 50 % 65 % 80 % 99 % 100 %
Fortgeschritten: Benutzerdefinierte Farben
Benutzerdefinierte statische Farbe und Demo von "vcenter"
Das folgende Beispiel zeigt abwechselnd Grafiken mit und ohne die Klasse vcenter in einer Zeile,
deren Höhe (line-height) größer als die Schrift (font-size) ist – so dass diese Ausrichtungsoption überhaupt einen Unterschied macht.
Außerdem zeigen die letzten drei Zeilen verschiedene mögliche Schreibweisen für Farbwerte.
<p style="line-height: 2em">
<span class="progresspie vcenter" data-piecolor="#93A">0</span> %
<span class="progresspie" data-piecolor="#93A">5</span> %
…
<span class="progresspie vcenter" data-piecolor="rgb(180,30,200)">80</span> %
<span class="progresspie" data-piecolor="rgb(200,50,220)">99</span> %
<span class="progresspie vcenter" data-piecolor="#9030A0">100</span> %</p>
</p>
0 % 5 % 25 % 42 % 50 % 65 % 80 % 99 % 100 %
Dasselbe Beispiel, nur mit Klasse progressring statt progresspie:
0 % 5 % 25 % 42 % 50 % 65 % 80 % 99 % 100 %
Das Attribut data-piecolor-function
Dieses Beispiel zeigt eine Funktion, welche die Standard-Funktion colorByPercent, die sonst
im Color-Modus implizit zur Anwendung kommt, wiederverwendet. Sie modifiziert allerdings die Abbildung
der Prozentwerte so, dass alle Werte kleiner als 50% konstant in rot gezeichnet werden und nur für
Werte größer ab 50% der wertabhängige Farbübergang von rot nach grün stattfindet:
<head>
…
<script type="text/javascript">
function colorGt50(percent) {
var p = percent <= 50 ? 0 : 2 * (percent - 50);
return $.fn.progressPie.colorByPercent(p);
}
</script>
…
</head>
…
<body>
…
<span class="progresspie" data-piecolor-function="colorGt50">100</span> %
…
</body>
0 % 5 % 25 % 42 % 50 % 65 % 80 % 99 % 100 %
Dasselbe Beispiel, nur mit Klasse progressring statt progresspie:
0 % 5 % 25 % 42 % 50 % 65 % 80 % 99 % 100 %
Prozentwert unsichtbar in Attribut data-percent statt als Elementinhalt
<span class="progresspie red" data-percent="0"> some text</span>
<span class="progresspie red" data-percent="5"></span>
…
some text
Dasselbe Beispiel, nur mit Klasse progressring statt progresspie:
some text
Beachten Sie den kleinen Größenunterschied: Die erste Torte wird als einzige in ein Element gezeichtet, das Text enthält, und ihre Größe wird automatisch an die Schriftgröße angepasst. Die weiteren Torten, die in leere Elemente eingefügt werden, können sich nicht an den Elementinhalt anpassen und bekommen daher eine Standardgröße zugewiesen! (Siehe Dokumentation für mehr Details zur Größenanpassung)
Wert aus einem Eingabefeld (input) anzeigen
Angenommen, Sie designen ein HTML-Formular, das von einem Nutzer im Browser auszufüllen ist.
In diesem Formular soll in einem Eingabefeld eine Prozentzahl eingegeben werden, die als Torte (oder Ring)
visualisiert (und bei Änderungen am Eingabefeld aktualisiert) werden soll.
Dazu können Sie das Attribut data-input verwenden. In diesem Attribut geben Sie einen jQuery-Selektor
an, über den das Input-Element zu finden ist.
Hat das Input-Element eine ID, so lautet ein solcher Selektor ganz einfach #
gefolgt vom id-Wert des Inputs:
<select id="valueSelect">
<option value="0">—</option>
<option value="20">20 %</option>
<option value="40">40 %</option>
<option value="60">60 %</option>
<option value="80">80 %</option>
<option value="100">100 %</option>
</select>
<span class="progresspie" data-input="#valueSelect"></span>
<input id="valueInput" type="text" value="50" size="3"/>
<span class="progresspie" data-input="#valueInput"></span>
Aktualisieren der Grafik
<head>
…
<script type="text/javascript">
var timerVal = 0;
var timerRunning = false;
function startStopTimer() {
timerRunning = !timerRunning;
if (timerRunning) {
timer();
}
}
function timer() {
if (timerRunning) {
timerVal+= 1;
if (timerVal > 100) {
timerVal = 0;
}
$("#update1").text(timerVal);
$("#update2").text("%").attr("data-percent", timerVal);
progressPies.draw();
if (timerVal < 100)
window.setTimeout(timer, 400);
else
timerRunning = false;
}
}
</script>
</head>
…
<body>
…
<p><span id="update1" class="progresspie color">0</span> %<br>
<span id="update2" class="progressring color" data-percent="0">%</span><br>
<button onclick="timer()">Start / Stop</button>
</p>
…
</body>
0 %
%
„Default-Busy-Indicators“
Fügen Sie die Klasse busy zu progresspie oder progressring hinzu,
um einen „Busy-Indicator“ zu rendern, der keinen Prozentwert visualisiert, sondern (abhängig von der
Wahl der progresspie- bzw. progressring-Klasse) wahlweise ein rotierendes kleines Tortenstück bzw.
einen rotierenden Kreis mit kleiner Lücke darstellt. Eine solche animierte Grafik kann z.B. eingesetzt werden,
um anzuzeigen, dass eine Webapplikation gerade arbeitet/beschäftigt ist, ohne jedoch den Fortschritt
in Prozent messen (und entsprechend als Pie/Ring/Balken) anzeigen zu können.
Siehe Beispiele jQuery für weitere „Busy-Indicator“-Varianten, die unter direkter Anwendung des jQuery-Plugins möglich sind. Dieses „Application“-Skript bietet lediglich diese zwei Busy-Indicator-Darstellungen, die Sie aber mit anderen oben beschriebenen Klassen oder Attributen kombinieren können, z.B. um eine Farbe für die Grafik festzulegen.
<span class="progresspie busy"></span>
<span class="progressring busy" data-piecolor="navy"></span>
