Connexion | Inscription | FAQ
Anonymous

toggle slider Zustand abfragen

+ Publier une réponse

1 message Page 1 sur 1


toggle slider Zustand abfragen

par mainstream » Lun Jan 08, 2018 1:15 pm

Hallo liebes Forum,
zunächst ein frohes neues Jahr.

Ich bin in Sachen html ein echter Anfänger und habe deshalb eine Frage an Euch. Ich habe mir eine html Seite (Code siehe weiter unten) erstellt. Dort sind 5 Slider dargestellt die auch beim Anklicken das tun was sie sollen. Soweit so gut.

Nun möchte ich jedoch anhand der Hintergrundfarbe (oder der Stellung) der einzelnen Slider jeweils eine PHP Datei ausführen.

Etwa so:
Wenn die Hintergrundfarbe des jeweiligen Sliders grün ist führe phpx aus wenn die Hintergrundfarbe rot ist führe phpy aus.

Geht sowas?

Vielen Dank für Eure Hilfe.

Ich hoffe ich bin im richtigen Forum gelandet

Gruß

mainstream

Code: Tout sélectionner
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0;" />
  <link rel="stylesheet" type="text/css" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" />
  <style>
main {
  background: white;
}

.toggle label {
  position: relative;
  display: inline-block;
  width: 15em;
  height: 4em;
}

.toggle input {
  display: none;
}

.toggle  .slider {    /* Grundfläche */
  position: absolute;
  cursor: pointer;
  top: 1.5em;
  left: 2em;
  width: 4em;
  height: 2em;
  background-color: #c32e04; /* red */
  transition: all .3s ease-in-out;
  border-radius: 1em; 
}

.toggle  .slider:before {  /* verschiebbarer Button */
  position: absolute;
  content: "";
  height: 1.6em;
  width: 1.6em;
  left: 0.2em;
  bottom: 0.2em;
  background-color: white;
  border-radius: 50%;
  transition: all .3s ease-in-out;
}

.toggle input:checked + .slider {
  background-color: #5a9900; /* green */
}

.toggle  input:checked + .slider:before {
  -webkit-transform: translateX(1.9em);  /* Android 4 */
  -ms-transform: translateX(1.9em);   /* IE9 */
  transform: translateX(1.9em);
}



  </style>
  <title>FlipFlop-Schalter</title>
</head>

<body>
 
  <main>
         
      <div class="toggle">
      <label>
        An-/Aus-Schalter     
        <input type="checkbox">
        <span class="slider"></span>
      </label>
    </div>


<div class="toggle">
      <label>
        An-/Aus-Schalter     
        <input type="checkbox">
        <span class="slider"></span>
      </label>
    </div>   
             

<div class="toggle">
      <label>
        An-/Aus-Schalter     
        <input type="checkbox">
        <span class="slider"></span>
      </label>
    </div>   

<div class="toggle">
      <label>
        Keller Licht     
        <input type="checkbox">
        <span class="slider"></span>
      </label>
    </div>   

<div class="toggle">
      <label>
        Kugellampen   
        <input type="checkbox">
        <span class="slider"></span>
      </label>
    </div>             
 
</main>
</body>
</html>
Avatar de l’utilisateur

mainstream

  • Messages: 1
  • Inscrit le: Dim Jan 07, 2018 3:27 pm


+ Publier une réponse

Page 1 sur 1