mainstream: Slider auswerten und php datei ausführen

Beitrag lesen

SELF-Forum

Slider auswerten und php datei ausführen

mainstream
– Informationen zu den Bewertungsregeln

Liebes Forum, ich möchte gerne die Zustände (Farben?) von mehrern Slidern auswerten und dann damit php Dateien ausführen. Etwa so: Wenn Slider 1 checked ist (grün) dann php Datei x1 ausführen wenn Slider uncheked ist(rot) dann php y1 ausführen.

Wenn Slider 2 checked ist (grün) dann php Datei x2 ausführen wenn Slider uncheked ist(rot) dann php y2 ausführen. . . . .

Hier der Code auf dem das ganze aufbauen soll.

`<!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: 10em;
  height: 3.5em;
}

.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:focus + .slider {
  background-color:pink;	
  box-shadow: 0 0 1px #5a9900;
}

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

.text  .slider:after {  /* Text vor dem FlipFlop-Schalter */
  position: absolute;
  content: "AUS";
  color: #c32e04;
  font-weight: bold;
  height: 1.6em;
  left: -2.5em;
  bottom: 0.2em;
}

.text input:checked + .slider:after {  /* Text hinter dem FlipFlop-Schalter */
  position: absolute;
  content: "AN";
  color: #5a9900;
  left: 4.5em;
}
 
  </style>
  <title>FlipFlop-Schalter</title>
</head>
 
<body>
  <h1>FlipFlop-Schalter</h1>
 
  <main>
    
    	<h2>mit CSS</h2>
    <div class="toggle">
      <label>
        An-/Aus-Schalter1     
        <input type="checkbox">
        <span class="slider"></span>
      </label>
    </div>

	<h2>mit CSS</h2>
    <div class="toggle">
      <label>
        An-/Aus-Schalter2     
        <input type="checkbox">
        <span class="slider"></span>
      </label>
    </div>


    	<h2>mit CSS</h2>
    <div class="toggle">
      <label>
        An-/Aus-Schalter3     
        <input type="checkbox">
        <span class="slider"></span>
      </label>
    </div>

	<h2>mit CSS</h2>
    <div class="toggle">
      <label>
        An-/Aus-Schalter4     
        <input type="checkbox">
        <span class="slider"></span>
      </label>
    </div>

	<h2>mit CSS</h2>
    <div class="toggle">
      <label>
        An-/Aus-Schalter5     
        <input type="checkbox">
        <span class="slider"></span>
      </label>
    </div>

                     
  </main>
</body>
</html>`

Geht sowas?

Vielen Dank für Eure Hilfe.

Gruß

mainstream

Beitrag melden
–
Informationen zu den Bewertungsregeln