jQuery toggle switch
Ein toggle switch ist eine nette Spielerei, wenn man eine Checkbox oder ein Radio Input Eingabefeld auf der Webseite dynamischer darstellen möchte. Klar, man kann das Input-Feld auch einfach nur anzeigen. Dies erfüllt sicherlich den gleichen Zweck wie der toggle switch mit jQuery – aber das kann ja jeder und sieht auch nicht schön aus. Daher baue ich gerne einen toggle switch ein und ich möchte Euch in diesem kleinen How-to zeigen, wie Ihr dies auch ganz einfach machen könnt.
jQuery toggle Switch
- HTML
- JS
- CSS
jQuery('span.slideControl').on('click', function() {
var state = jQuery( 'input' ).prop('checked');
if ( state == true ) {
jQuery( this ).removeClass('active');
jQuery( 'input' ).prop('checked', false );
var status = 'false';
} else if ( state == false ) {
jQuery( this ).addClass('active');
jQuery( 'input' ).prop('checked', true );
var status = 'true';
}
jQuery( 'span.slideControlMessage' ).html( status );
});div.slideControlContent {
width: 100%;
height: 200px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
align-content: center;
padding: 0 40%;
text-align: center;
}
span.slideControl {
flex: 1 100%;
max-width: 40px;
height: 10px;
border-radius: 5px;
background: #fff;
display: inline-block;
margin: 8px 8px 0 0;
position: relative;
cursor: pointer;
}
span.slideControl::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: 5px;
background: #d35d5d;
box-shadow: inset 0 4px 8px 0 rgba(46,43,56,0.16);
z-index: 1;
}
span.slideControl.active::before {
background: #5dd39e;
}
span.slideControl::after {
content: '';
position: absolute;
left: 2px;
top: -7px;
width: 24px;
height: 24px;
background: #3f3f3f;
box-shadow: 0 4px 8px 0 rgba(46,43,56,0.16), 0 8px 16px 0 rgba(46,43,56,0.08), 0 16px 32px 0 rgba(46,43,56,0.04);
z-index: 9;
border-radius: 50%;
margin: 0;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
}
span.slideControl.active::after {
left: 100%;
margin: 0 0 0 -26px;
}
span.slideControlCheckbox {
flex: 1 100%;
padding: 24px 0 12px 0;
}
span.slideControlMessage {
flex: 1 100%;
}Keine Produkte gefunden.
In meinem toggle switch Beispiel habe ich die Checkbox mit Absicht sichtbar gelassen, damit Ihr seht, dass die Checkbox auch auf ein anderes Element reagieren kann als auf sich selbst. Wenn ihr den toggle switch in Eure Webseite einbindet solltet Ihr die Checkbox nicht anzeigen.
Wie funktioniert der toggle switch mit jQuery?
Zunächst einmal benötigen wir ein input Field und ein Element auf das wir ein click-Event legen. In meinem Fall sind es die folgenden Elemente:
Nun können wir mit .prop('checked') den Status der Checkbox auslesen. Bekommen wir ein true zurück, dann entfernen wir bei .slideControl die Klasse active und ändern den checked Status auf false. Somit entfernen wir den Haken aus der Checkbox und lassen den toggle switch in die Off-Stellung bewegen.
Bekommen wir ein false zurück fügen wir die Klasse active hinzu und geben der Checkbox den Status true. Damit wander der switch in die On-Stellung und die Checkbox ist aktiv.
jQuery('span.slideControl').on('click', function() {
var state = jQuery( 'input' ).prop('checked');
if ( state == true ) {
jQuery( this ).removeClass('active');
jQuery( 'input' ).prop('checked', false );
} else if ( state == false ) {
jQuery( this ).addClass('active');
jQuery( 'input' ).prop('checked', true );
}
});Mit jQuery Data Attributen könnt Ihr zudem noch einige weitere Spielereien anzeigen lassen.
Keine Produkte gefunden.
Hinterlasse doch ein Kommentar
Schreibe ein Kommentar zu jQuery toggle switch
Wenn dir der Beitrag jQuery toggle switch gefallen hat oder du Kritik bzw. Verbesserungsvorschläge hast, dann würde ich mich freuen, wenn Du ein Kommentar hinterlassen würdest.