Hallo Liebe pi-Gemeinde,
ich hab leider in Sachen HTML/CSS einen richtigen Knoten im Kopf und komm hier nicht mehr weiter. Vielleicht kann mir einer der Guru´s ein wenig unter die Arme greifen?
Ich stehe noch ganz am Anfang und versuche eine kleine Weboberfläche für die Steuerung von diversen Programmen zu realisieren. Bisher habe ich jeweils einen on-Button und einen seperaten off-Button erstellt um Funktionen per HTTP-Link (z.B. Steuerung homematic ccu2) auslösen zu können. Um das ganze optisch etwas aufzupeppen würde ich gern einen flipswitch/toogle dafür nutzen, damit dies mit einem Knopf geschieht und zudem der Status ersichtlich ist.
Über die Website proto.io habe ich eine css erstellt und eine kleine HTML erzeugt. Hier der Inhalt der beiden Dateien:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>flipswitch</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</body>
</html>
Alles anzeigen
.onoffswitch {
position: relative; width: 89px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
border: 2px solid #999999; border-radius: 20px;
}
.onoffswitch-inner {
display: block; width: 200%; margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
display: block; float: left; width: 50%; height: 39px; padding: 0; line-height: 39px;
font-size: 24px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "on";
padding-left: 10px;
background-color: #14C208; color: #D4D2D2;
}
.onoffswitch-inner:after {
content: "off";
padding-right: 10px;
background-color: #ED1D2B; color: #D4D2D2;
text-align: right;
}
.onoffswitch-switch {
display: block; width: 18px; margin: 10.5px;
background: #FFFFFF;
position: absolute; top: 0; bottom: 0;
right: 46px;
border: 2px solid #999999; border-radius: 20px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
}
Alles anzeigen
Der Flipswitch ansich funktioniert, ich hab aber keine Ahnung wie ich 1. die Links bei on/off integrieren kann zudem einen Live-Status realisieren kann? Mit Status meine ich, dass der aktive Status des Zustandes (on/off) direkt als richtiger Button beim öffnen der Seite angezeigt wird. Wäre jemand so lieb und kann mir hier Hilfe leisten??
Danke und Grüße
M.