Ein-/Aus-Schalter für Select- und Radio-Elemente in Scriptcase

Grafische Ein-/Aus-Schalter anzeigen bei Select und Radio-Elementen in Scriptcase Forms

In Scriptcase Form-Applications werden die Select- und Radio-Elemente normalerweise mit den üblichen Kästchen, bzw. runden Click-Symbolen dargestellt:

select or radio buttons standard

Mit einer CSS-Definition und einer ‘Ersetzen’-Routine kann das in optisch ansprechende Slider-Symbole geändert werden:

select or radio buttons new

 

Dazu werden im onLoad-Event der Form die benötigten CSS-Definitionen geladen, die das Aussehen und die Bewegung der neuen ‘Slider’ definieren:

Da es sich um HTML/CSS-Anweisungen handelt wird am Beginn der PHP-Code der Scriptcase-Form beendet  ?>  und danach wieder fortgesetzt   <?php .

Diese Definition stammt aus einer Präsentation von Marcia (Scriptcase) in Youtube https://www.youtube.com/watch?v=qoEDNKAxa_Y
Man kann auch andere CSS-Definitionen verwenden. Als Beispiel hier nur eine Website mit einem Generator für solche Informationen:  https://proto.io/freebies/onoff/
Es gibt im Web viele andere…

Auf der Form müssen natürlich vorher die Select- und Radio- Felder definiert werden.

In unserem Beispiel:

Definition Radio Element

Zum Vergrößern klicken

 

Definition Select Element

Zum Vergrößern klicken

 

Beim Laden der Form muß im onLoad-Event mitgeteilt werden, welche Elemente (Select/Radio) das neue Aussehen erhalten sollen.

Beispiel 1 – Alle Checkbox und Radio-Elemente:

Beispiel 2 – Nur die Checkbox-Elemente:

Beispiel 3 – Nur das Radio-Element mit dem Namen radio_1:

Hinweis: Es handelt sich um JQuery-Code, der wieder mit  ?>  und  <?php  umschlossen werden muß.

Hinweis: Scriptcase enthält in der Entwicklungsumgebung und auch in jedem veröffentlichen (deployed) Project die jQuery-Bibliotheken. Sie müssen also nicht gesondert geladen werden.

Eine solche Form könnte dann also aussehen:

Scriptcase Form with toggle slider as select or radio

Veröffentlicht in Scriptcase Sniplets Getagged mit: , , , ,