Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
Beide Seiten der vorigen RevisionVorhergehende ÜberarbeitungNächste Überarbeitung | Vorhergehende ÜberarbeitungNächste ÜberarbeitungBeide Seiten der Revision | ||
de:create:questions:slider [29.08.2017 12:39] – [JavaScript Referenz] msd-media | de:create:questions:slider [11.01.2019 11:29] – admin | ||
---|---|---|---|
Zeile 83: | Zeile 83: | ||
- | ==== Beispiel | + | ==== Beispiel: Euro-Beträge |
Der folgende HTML-/ | Der folgende HTML-/ | ||
Zeile 107: | Zeile 107: | ||
SoSciSliders.setFormat(formatter, | SoSciSliders.setFormat(formatter, | ||
</ | </ | ||
+ | |||
+ | **Hinweis: | ||
**Tipp:** Der Name '' | **Tipp:** Der Name '' | ||
- | ==== Beispiel | + | ==== Beispiel: Negative Werte ==== |
Der folgende JavaScript-Code (er muss wieder wie oben von einem ''< | Der folgende JavaScript-Code (er muss wieder wie oben von einem ''< | ||
Zeile 128: | Zeile 130: | ||
- | ==== Beispiel | + | ==== Beispiel: Uhrzeit ==== |
+ | |||
+ | Um einen Zeitwert zwischen "0:00 Std." und "24:00 Std." mit einer Schrittweite von 15 Minuten anzuzeigen, muss im Schieberegler eine Differenzierung " | ||
+ | |||
+ | <code javascript> | ||
+ | <script type=" | ||
+ | <!-- | ||
+ | formatter = function(value, | ||
+ | if (value < 0) return ""; | ||
+ | // Transformation auf 0..96 | ||
+ | value = Math.round(value - 1); | ||
+ | // Stunden und Minuten durch Division/ | ||
+ | var hours = Math.floor(value / 4); | ||
+ | var minutes = Math.floor(60 * (value % 4) / 4); | ||
+ | // Die Minuten immer zweistellig anzeigen | ||
+ | if (minutes < 10) minutes = " | ||
+ | // Die Werte durch einen Doppelpunkt verbinden | ||
+ | return hours + ":" | ||
+ | } | ||
+ | SoSciSliders.setFormat(formatter); | ||
+ | // --> | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | Mit dem gleiche Code lässt sich natürlich eine Uhrzeit abfragen, es muss lediglich das " | ||
+ | |||
+ | |||
+ | ==== Beispiel: Anzeige für einzelne Schieberegler | ||
Mittels JavaScript können Sie für einzelne Schieberegler die Anzeige der Position deaktivieren. Folgender HTML-/ | Mittels JavaScript können Sie für einzelne Schieberegler die Anzeige der Position deaktivieren. Folgender HTML-/ | ||
Zeile 141: | Zeile 170: | ||
- | ==== Beispiel | + | ==== Beispiel: Positionierung des angezeigten Werts ==== |
Sie können exakt steuern, an welcher Position der Wert angezeigt wird. Dafür müssen Sie eine JavaScript-Funktion definieren, welche die gewünschte Position der Beschriftung (Mittelpunkt '' | Sie können exakt steuern, an welcher Position der Wert angezeigt wird. Dafür müssen Sie eine JavaScript-Funktion definieren, welche die gewünschte Position der Beschriftung (Mittelpunkt '' |