Schieberegler

Wert:
(Range: -10 ... 10)

 Java-Applet sr.class (Schieberegler)
TU Dresden, Psychologie des Lehrens und Lernens
Contact: Rüdiger Krauße mail@krausze.de		 (Stand 14 Jan 2002)
Dieses Bild wurde von der Seite http://linus.psych.tu-dresden.de geklaut.

Dokumentation

Allgemeines     Einbindung des Applets in HTML-Dokumente     Die Parameter     Beispiel     Reglerwert direkt mit JavaScript abfragen     SR-Hauptseite

1 Allgemeines[Inhalt]

Dieses Java-Applet stellt einen horizontalen Schieberegler dar, der mit der Maus bewegt werden kann und der auch mit einem Eingabefeld eines Formulars verkoppelt werden kann, so dass der Wert des Reglers versendet bzw. mit JavaScript weiterverarbeitet werden kann.

2 Einbindung des Applets in HTML-Dokumente[Inhalt]

Wenn ein Atommodell in eine HTML-Datei eingefügt werden soll, muss wie üblich das applet-Tag verwendet werden, z.B.

<applet code="sr.class" align="baseline" width="320" height="40" mayscript>
  <param name="range" value="-10; 10">
  <param name="scale" value="20">
  <param name="left" value="negativ">
  <param name="right" value="positiv">
</applet>

Die einzubindende Datei ist sr.class. Weitere Informationen zum Einbinden von Java-Applets finden sie z.B. bei selfhtml. Wenn der Regler ein Formularfeld ansteuern soll, muss in dem Dokument natürlich auch ein solches definiert sein; außerdem muss in diesem Fall im Tag mayscript angegeben werden, damit das Applet auf das Feld zugreifen darf.
Das genaue Aussehen und Verhalten wird über die Parameter eingestellt.

3 Die Parameter[Inhalt]

Wie der Schieberegler aussieht und wie er sich verhält, wird über die Parameter festgelegt:

Parameter Bedeutung Erläuterung Beispiel
Oberfläche des Schiebereglers
scale Optische Unterteilung der Schieberleiste Gibt an, in wieviel Teile die Leiste geteilt werden soll.
Default: Wird dieser Parameter weggelassen, wird die Leiste überhaupt nicht unterteilt.		 
<param name="scale"
 value="10">
start Startwert des Reglers Gibt an, an welcher Stelle der Regler am Anfang stehen soll. die Zahl bezieht sich auf den range. (siehe unten)
Default: Wird dieser Parameter weggelassen, steht der Regler am Anfang in der Mitte der Leiste.		 
<param name="start"
 value="0">
left Text am linken Ende der Schieberleiste Der angegebene Text erscheint am linken Ende unterhalb der Leiste.
Default: Wird dieser Parameter weggelassen, erscheint dort kein Text.		 
<param name="left"
 value="kaum">
right Text am rechten Ende der Schieberleiste Der angegebene Text erscheint am rechten Ende unterhalb der Leiste.
Default: Wird dieser Parameter weggelassen, erscheint dort kein Text.		 
<param name="right"
 value="oft">
xmargin Rand links und rechts Dieser Parameter gibt an, wie groß der Rand links und rechts sein soll (in Pixeln). Wenn z.B. die Texte recht lang sind, sollte man auch einen größeren seitliech Rand setzen, damit die Texte unter den Enden der Leiste zentiert werden können.
Default: Wird dieser Parameter weggelassen, beträgt der Rand 13 Pixel.		 
<param name="xmargin"
 value="50">
Anbindung an ein Formularfeld
range Wertebereich des Schiebereglers Der Wertebereich gibt an, welche Werte im Formularfeld entsprechend der Regelerstellung angegeben werden. Dazu wird der Wert, wenn der Regler ganz links steht und der Wert, wenn er ganz rechts steht getrennt durch Komma angegeben. Es können auch negative Zahlen angegeben werden. Entsprechend der Reglerstellung werden dann in das Formularfeld die ganzzahligen Zwischenwerte geschrieben.
Wird nur eine Zahl angegeben, so wird diese für den rechten Reglerauschlag verwendet, als Wert für links wird 0 angenommen.
Default: Ist der range-Parameter nicht angegeben, so wird die Belegung 0; 100 gesetzt.		 
<param name="range"
 value="1; 10">
form Formularname des Formularfeldes Dieser Wert übergibt den Namen des Formulars, das das Formularfeld enthält. Das ist u.U. besonders wichtig, wenn das Dokument mehrere Formulare enthält.
Default: Wird dieser Parameter weggelassen, wird das erste Formular verwendet.		 
<param name="form"
 value="formular1">
element Elementname des Formularfeldes Dieser Parameter übergibt den Namen des Formularfeldes, in das der aktuelle Reglerwert geschrieben werden soll. Dieses Feld sollte von Typ "text" (sichtbar) oder "hidden" (unsichtbar) sein.
Default: Wird dieser Parameter weggelassen, so wird das erste Eingabefeld im Formular verwendet.
Soll verhindert werden, das der Wert in ein Formularfeld geschrieben wird, kann hier einfach ein Name angegeben werden, der nicht im Dokument vorkommt (es erfolgt keine Fehlermeldung).		 
<param name="element"
 value="verwendung">
notify Aktion nach Änderung des Reglers Der Wert dieses Parameters kann beliebiger JavaScript-Quelltext sein. Dieser wird ausgeführt, wenn der Regler bewegt und wieder losgelassen wurde (typischer Weise ein Funktionsaufruf). Auf diese Weise kann mit JavaScript sofort auf einen geänderten Regler reagiert werden.
Default: Wird dieser Parameter weggelassen, so wird keine zusätzliche JavaScript-Aktion ausgeführt.		 
<param name="notify"
 value="Update()">
notifypromptly Aktion während der Änderung des Reglers Der Wert dieses Parameters kann ebenfalls beliebiger JavaScript-Quelltext sein. Dieser wird während des Schiebens jedes mal ausgeführt, sobald sich die Maus (resp. der Regler) bewegt. Auf diese Weise kann mit JavaScript während des Schiebens auf den Reglerwert reagiert werden.
Default: Wird dieser Parameter weggelassen, so wird keine zusätzliche JavaScript-Aktion ausgeführt.		 
<parm name="notifypromtly"
 value="Check(document.sr1.value)">
Farben
bgcolor Hintergrundfarbe des Schiebereglers Dieser Parameter gibt die Hintergrundfarbe des Reglers an. Auf diese Weise kann man den Regler farblich in das Dokument einpassen. Der Wert kann entweder im üblichen HTML-Hexadezimalstil, oder als drei durch Semikolon getrennte Zahlen für Rot, Grün und Blau im Bereich von 0 bis 255;
Default: Fehlt dieser Parameter, erscheint der Regler in hellgrau. 		 
<param name="bgcolor"
 value="#EEFFFF">
srcolor Farbe des Schiebers Dieser Parameter gibt die Farbe des Reglers an (des Zeigers), wenn er sich in Ruhestellung befindet.
Default: Fehlt dieser Parameter, so wird der Wert von bgcolor übernommen.		 
<param name="srcolor"
 value="#CCAAFF">
srmovecolor Farbe des Schiebers beim Bewegen Dieser Parameter gibt die Farbe des Reglers an (des Zeigers), während er mit der Maus bewegt wird.
Default: Fehlt dieser Parameter, so wird der Wert von srcolor übernommen.		 
<param name="srmovecolor"
 value="#AA88FF">
Farbbalken
colorbar Höhe des Farbbalkens Es ist möglich, den Ausschlag des Reglers durch einen darüber befindlichen Farbbalken noch mehr zu veranschaulichen. Dieser Parameter gibt die Höhe des Balkens an.
Default: Entfällt dieser Parameter, so wird kein Farbbalken angezeigt.		 
<param name="colorbar"
 value="8">
colorbarcenter Mittelpunkt des Balkens, Nullpunkt des Balkens Der Farbbalken hat in der Regel einen Nullpunkt, auf den sich die Balkenausschläge beziehen. Rechts und links von diesem Punkt aus könne auch verschiedene Farben verwendet werden. Dieser Parameter gibt die Position dieses Nullpunktes an, wobei er sich auf die Range-Werte bezieht.
Wenn der Wert außerhalb von Range liegt, ergibt sich ein einseitiger Farbbalken.
Default: Entfällt dieser Parameter, so wird 0 angenommen		 
<param name="colorbarcenter"
 value="50">
leftcolor Balkenfarbe links Dieser Parameter gibt die Farbe des Balkens an, wenn er links vom Balken-Nullpunkt angezeigt wird.
Default: Fehlt dieser Parameter, so wird Rot verwendet.		 
<param name="leftcolor"
 value="#8080FF">
rightcolor Balkenfarbe rechts Dieser Parameter gibt die Farbe des Balkens an, wenn er rechts vom Balken-Nullpunkt angezeigt wird
Default: Fehlt dieser Parameter, so wird Grün verwendet.		 
<param name="rightcolor"
 value="#008000">
4 Beispiel[Inhalt]
Wert:
 
<applet width="227" height="38" code="sr.class" name="regler1" mayscript>
  <param name="scale" value="9">
  <param name="left" value="immer">
  <param name="right" value="nie">
  <param name="range" value="10; 1">
  <param name="form" value="fm">
  <param name="element" value="a1">
  <param name="bgcolor" value="#CCCCFF">
  <param name="srcolor" value="#FFCCFF">
  <param name="srmovecolor" value="#CC88CC">
</applet>
Wert:
 
<applet width="227" height="48" code="sr.class" name="regler2" mayscript>
  <param name="scale" value="10">
  <param name="start" value="8">
  <param name="left" value="stimme zu">
  <param name="right" value="stimme nicht zu">
  <param name="range" value="0; 10">
  <param name="form" value="fm">
  <param name="element" value="a2">
  <param name="bgcolor" value="#FFFFCC">
  <param name="colorbar" value="10">
  <param name="colorbarcenter" value="5">
  <param name="rightcolor" value="#000080">
</applet>
5 Reglerwert direkt mit JavaScript abfragen[Inhalt]

Der aktuelle Reglerwert kann auch direkt mit JavaScript abgefragt werden, und zwar nach der üblichen Manier:

var some_var = document.appletname.variable_name;

Der Name des Applets kann im Applet-Tag mit vereinbart werden, ansonsten kann auch über document.applets[..] zugegriffen werden. Der Reglerwert befindet sich in der Variable value. Also im obigen Beispiel z.B.

var SRWert = document.regler1.value;

Auf diese Weise kann man auch ohne Verwendung eines Formular die Reglerdaten weiterverwenden: Man verwendet den notify-Parameter und liest des Wert direkt aus, z.B. 

<applet width="227" height="38" code="sr.class" name="regler1" mayscript>
  <param name="scale" value="9">
  <param name="left" value="immer">
  <param name="right" value="nie">
  <param name="range" value="10; 1">
  <param name="notify" value="SetFunFactor(document.regler1.value)">
</applet>

Die JavaScript-Function SetFunFactor() würde bei jeder Änderung mit dem aktuellen Wert aufgerufen werden.

Viel Spaß !

Links:   andere Projekte Originalquelle im WEB: http://linus.psych.tu-dresden.de/StuPla/sr/doc/sr.htm