Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen RevisionVorhergehende Überarbeitung
Nächste Überarbeitung
Vorhergehende Überarbeitung
Nächste ÜberarbeitungBeide Seiten der Revision
de:create:questions:slider [17.03.2018 21:01] adminde:create:questions:slider [11.01.2019 11:29] admin
Zeile 83: Zeile 83:
  
  
-==== Beispiel ====+==== Beispiel: Euro-Beträge ====
  
 Der folgende HTML-/JavaScript-Code transformiert den Wertebereich 1-101 auf 0-20, rundet auf ganze Zahlen und zeigt ein Euro-Zeichen hinter dem Wert an. Der folgende HTML-/JavaScript-Code transformiert den Wertebereich 1-101 auf 0-20, rundet auf ganze Zahlen und zeigt ein Euro-Zeichen hinter dem Wert an.
Zeile 113: Zeile 113:
  
  
-==== Beispiel ====+==== Beispiel: Negative Werte ====
  
 Der folgende JavaScript-Code (er muss wieder wie oben von einem ''<script>''-Tag umschlossen werden) zeigt eine Zahl zwischen -25.0°C und +25.0°C. Die JavaScript-Methode ''toFixed()'' sorgt für die Nachkommastelle. Der folgende JavaScript-Code (er muss wieder wie oben von einem ''<script>''-Tag umschlossen werden) zeigt eine Zahl zwischen -25.0°C und +25.0°C. Die JavaScript-Methode ''toFixed()'' sorgt für die Nachkommastelle.
Zeile 130: 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 "1..97" eingestellt werden (4 Schritte mal 24 Stunden plus den Wert 24:00). 
 + 
 +<code javascript> 
 +<script type="text/javascript"> 
 +<!-- 
 +formatter = function(value, reversed) { 
 +  if (value < 0) return ""; 
 +  // Transformation auf 0..96 
 +  value = Math.round(value - 1); 
 +  // Stunden und Minuten durch Division/Rest (Modulo) mit 4 ermitteln 
 +  var hours = Math.floor(value / 4); 
 +  var minutes = Math.floor(60 * (value % 4) / 4); 
 +  // Die Minuten immer zweistellig anzeigen 
 +  if (minutes < 10) minutes = "0" + minutes;  
 +  // Die Werte durch einen Doppelpunkt verbinden 
 +  return hours + ":" + minutes + " Std."; 
 +
 +SoSciSliders.setFormat(formatter); 
 +// --> 
 +</script> 
 +</code> 
 + 
 +Mit dem gleiche Code lässt sich natürlich eine Uhrzeit abfragen, es muss lediglich das "Std." am Ende gegen "Uhr" ausgestauscht werden. 
 + 
 + 
 +==== Beispiel: Anzeige für einzelne Schieberegler ====
  
 Mittels JavaScript können Sie für einzelne Schieberegler die Anzeige der Position deaktivieren. Folgender HTML-/JavaScript-Code deaktiviert die Anzeige für den zweiten Schieberegler in Frage "AB01". Mittels JavaScript können Sie für einzelne Schieberegler die Anzeige der Position deaktivieren. Folgender HTML-/JavaScript-Code deaktiviert die Anzeige für den zweiten Schieberegler in Frage "AB01".
Zeile 143: 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 ''x'', ''y'') sowie deren Ausrichtung (''align'') als Objekt zurückgibt. Als Parameter erhält die Funktion die Position des Regler-Knopfs (Mittelpunkt x, y), die relative Position (im Wertebereich 0 bis 1) sowie Breite und Höhe der Beschriftung und den Index des Regler-Knopfes, für den Fall, dass ein zweiter Regler aktiviert ist. 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 ''x'', ''y'') sowie deren Ausrichtung (''align'') als Objekt zurückgibt. Als Parameter erhält die Funktion die Position des Regler-Knopfs (Mittelpunkt x, y), die relative Position (im Wertebereich 0 bis 1) sowie Breite und Höhe der Beschriftung und den Index des Regler-Knopfes, für den Fall, dass ein zweiter Regler aktiviert ist.
de/create/questions/slider.txt · Zuletzt geändert: 19.04.2023 21:55 von admin
 
Falls nicht anders bezeichnet, ist der Inhalt dieses Wikis unter der folgenden Lizenz veröffentlicht: CC Attribution-Share Alike 4.0 International
Driven by DokuWiki