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 [17.03.2018 21:01] – admin | de:create:questions:slider [06.05.2019 19:57] – Hinweis auf Math.round() admin | ||
---|---|---|---|
Zeile 77: | Zeile 77: | ||
Falls etwas anderes als der Prozentwert angezeigt werden soll, lässt sich dies mit ein wenig JavaScript bewerkstelligen. Zunächst benötigt man dafür eine Funktion, welche den internen Wert des Schiebereglers in den Text überführt, | Falls etwas anderes als der Prozentwert angezeigt werden soll, lässt sich dies mit ein wenig JavaScript bewerkstelligen. Zunächst benötigt man dafür eine Funktion, welche den internen Wert des Schiebereglers in den Text überführt, | ||
+ | |||
+ | **Hinweis: | ||
**Hinweis: | **Hinweis: | ||
- | **Hinweis: | + | **Hinweis: |
- | ==== Beispiel | + | ==== Beispiel: Euro-Beträge |
Der folgende HTML-/ | Der folgende HTML-/ | ||
Zeile 113: | Zeile 115: | ||
- | ==== 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 130: | Zeile 132: | ||
- | ==== 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 143: | Zeile 172: | ||
- | ==== 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 '' |