Wie erstellt man eine Umschalttaste?

Ich möchte eine Umschaltfläche in HTML mit CSS erstellen. Ich möchte, dass es beim Klicken darauf gedrückt bleibt und dann beim erneuten Klicken herausspringt.

Wenn es keine Möglichkeit gibt, verwenden Sie einfach CSS. Gibt es eine Möglichkeit, dies mit jQuery zu tun?

Der gute semantische Weg wäre, ein Kontrollkästchen zu verwenden und es dann auf unterschiedliche Weise zu formatieren, ob es aktiviert ist oder nicht. Aber es gibt keine guten Möglichkeiten, dies zu tun. Sie müssen zusätzliche Spanne, zusätzliche Div hinzufügen und für ein wirklich schönes Aussehen etwas Javascript hinzufügen.

Die beste Lösung besteht also darin, eine kleine jQuery-Funktion und zwei Hintergrundbilder zum Stylen der beiden unterschiedlichen Status der Schaltfläche zu verwenden. Beispiel mit einem durch Ränder gegebenen Auf / Ab-Effekt:

$(document).ready(function() {
  $('a#button').click(function() {
    $(this).toggleClass("down");
  });
});

a {
  background: #ccc;
  cursor: pointer;
  border-top: solid 2px #eaeaea;
  border-left: solid 2px #eaeaea;
  border-bottom: solid 2px #777;
  border-right: solid 2px #777;
  padding: 5px 5px;
}

a.down {
  background: #bbb;
  border-top: solid 2px #777;
  border-left: solid 2px #777;
  border-bottom: solid 2px #eaeaea;
  border-right: solid 2px #eaeaea;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="button" title="button">Press Me</a>

Natürlich können Sie Hintergrundbilder hinzufügen, die Schaltflächen nach oben und unten darstellen, und die Hintergrundfarbe transparent machen.

Mit der JQuery-Benutzeroberfläche können Sie problemlos Schaltflächen erstellen. Setzen Sie das einfach

<label for="myToggleButton">my toggle button caption</label>
<input type="checkbox" id="myToggleButton" />

Lassen Sie auf Ihrer Seite und dann in Ihrem Körper onLoadoder in Ihrer $.ready()(oder einigen Objektliteralen init(), wenn Sie eine Ajax-Site erstellen ..) JQuery wie folgt fallen:

$("#myToggleButton").button()

das ist es. (Vergessen Sie das nicht, < label for=...>da JQueryUI dies für den Hauptteil der Umschalttaste verwendet.)

Von dort aus arbeiten Sie einfach wie mit jedem anderen input="checkbox", denn das ist immer noch das zugrunde liegende Steuerelement, aber die JQuery-Benutzeroberfläche häutet es einfach so, dass es wie eine hübsche Umschalttaste auf dem Bildschirm aussieht.

Hier ist ein Beispiel mit pure css:

  .cmn-toggle {
    position: absolute;
    margin-left: -9999px;
    visibility: hidden;
  }
  .cmn-toggle + label {
    display: block;
    position: relative;
    cursor: pointer;
    outline: none;
    user-select: none;
  }
  input.cmn-toggle-round + label {
    padding: 2px;
    width: 120px;
    height: 60px;
    background-color: #dddddd;
    border-radius: 60px;
  }
  input.cmn-toggle-round + label:before,
  input.cmn-toggle-round + label:after {
    display: block;
    position: absolute;
    top: 1px;
    left: 1px;
    bottom: 1px;
    content: "";
  }
  input.cmn-toggle-round + label:before {
    right: 1px;
    background-color: #f1f1f1;
    border-radius: 60px;
    transition: background 0.4s;
  }
  input.cmn-toggle-round + label:after {
    width: 58px;
    background-color: #fff;
    border-radius: 100%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    transition: margin 0.4s;
  }
  input.cmn-toggle-round:checked + label:before {
    background-color: #8ce196;
  }
  input.cmn-toggle-round:checked + label:after {
    margin-left: 60px;
  }

<div class="switch">
  <input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-round" type="checkbox">
  <label for="cmn-toggle-1"></label>
</div>

In Kombination mit dieser Antwort können Sie auch diese Art von Stil verwenden, der den mobilen Einstellungen ähnelt.

HTML

<a href="#" class="toggler">&nbsp;</a>
<a href="#" class="toggler off">&nbsp;</a>
<a href="#" class="toggler">&nbsp;</a>

CSS

a.toggler {
    background: green;
    cursor: pointer;
    border: 2px solid black;
    border-right-width: 15px;
    padding: 0 5px;
    border-radius: 5px;
    text-decoration: none;
    transition: all .5s ease;
}

a.toggler.off {
    background: red;
    border-right-width: 2px;
    border-left-width: 15px;
}

jQuery

$(document).ready(function(){
    $('a.toggler').click(function(){
        $(this).toggleClass('off');
    });
});

Könnte viel schöner sein, gibt aber die Idee.
Ein Vorteil ist, dass es mit jquery und / oder CSS3 Fiddler animiert werden kann

Wenn Sie eine richtige Schaltfläche wünschen, benötigen Sie Javascript. So etwas in der Art (erfordert einige Arbeiten am Styling, aber Sie bekommen das Wesentliche). Ich würde mich nicht darum kümmern, jquery für etwas so Triviales zu verwenden, um ehrlich zu sein.

<html>
<head>
<style type="text/css">
.on { 
border:1px outset;
color:#369;
background:#efefef; 
}

.off {
border:1px outset;
color:#369;
background:#f9d543; 
}
</style>

<script language="javascript">
function togglestyle(el){
    if(el.className == "on") {
        el.className="off";
    } else {
        el.className="on";
    }
}
</script>

</head>

<body>
<input type="button" id="btn" value="button" class="off" onclick="togglestyle(this)" />
</body>
</html>

Sie können nur verwenden toggleClass(), um den Status zu verfolgen. Dann überprüfen Sie, ob das Schaltflächenelement die Klasse hat, wie folgt:

$("button.toggler").click( function() {
    $me = $(this);
    $me.toggleClass('off');
    if($me.is(".off")){
        alert('hi');
    }else {
        alert('bye');
    }
});

Und ich benutze das buttonElement aus semantischen Gründen für Schaltflächen.

<button class="toggler">Toggle me</button>

Sie können ein Ankerelement ( <a></a>) und einen Link: active und a: verwenden, um das Hintergrundbild so zu ändern, dass es ein- oder ausgeschaltet wird. Nur ein Gedanke.

Bearbeiten: Die obige Methode funktioniert nicht gut zum Umschalten. Sie müssen jedoch keine jquery verwenden. Schreiben Sie eine einfache onClick-Javascript-Funktion für das Element, die das Hintergrundbild entsprechend ändert, damit es so aussieht, als ob die Schaltfläche gedrückt wird, und setzen Sie ein Flag. Beim nächsten Klick werden Bild und Flagge zurückgesetzt. Wie so

var flag = 0;
function toggle(){
if(flag==0){
    document.getElementById("toggleDiv").style.backgroundImage="path/to/img/img1.gif";
    flag=1;
}
else if(flag==1){
    document.getElementById("toggleDiv").style.backgroundImage="path/to/img/img2.gif";
    flag=0;
}
}

Und das HTML gefällt mir <div id="toggleDiv" onclick="toggle()">Some thing</div>

Ich denke nicht, dass die Verwendung von JS zum Erstellen einer Schaltfläche eine gute Praxis ist. Was ist, wenn der Browser des Benutzers JavaScript deaktiviert?

Außerdem können Sie dazu einfach ein Kontrollkästchen und ein bisschen CSS verwenden. Und es ist einfach, den Status Ihres Kontrollkästchens abzurufen.

Dies ist nur ein Beispiel, aber Sie können es so gestalten, wie Sie möchten.

http://jsfiddle.net/4gjZX/

HTML

<fieldset class="toggle">
  <input id="data-policy" type="checkbox" checked="checked" />
  <label for="data-policy">
  <div class="toggle-button">
    <div class="toggle-tab"></div>
  </div>
  Toggle
  </label>
</fieldset>​

CSS

.toggle label {
  color: #444;
  float: left;
  line-height: 26px;
}
.toggle .toggle-button {
  margin: 0px 10px 0px 0px;
  float: left;
  width: 70px;
  height: 26px;
  background-color: #eeeeee;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#fafafa));
  background-image: -webkit-linear-gradient(top, #eeeeee, #fafafa);
  background-image: -moz-linear-gradient(top, #eeeeee, #fafafa);
  background-image: -o-linear-gradient(top, #eeeeee, #fafafa);
  background-image: -ms-linear-gradient(top, #eeeeee, #fafafa);
  background-image: linear-gradient(top, #eeeeee, #fafafa);
  filter: progid:dximagetransform.microsoft.gradient(GradientType=0, StartColorStr='#eeeeee', EndColorStr='#fafafa');
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border: 1px solid #D1D1D1;
}
.toggle .toggle-button .toggle-tab {
  width: 30px;
  height: 26px;
  background-color: #fafafa;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#eeeeee));
  background-image: -webkit-linear-gradient(top, #fafafa, #eeeeee);
  background-image: -moz-linear-gradient(top, #fafafa, #eeeeee);
  background-image: -o-linear-gradient(top, #fafafa, #eeeeee);
  background-image: -ms-linear-gradient(top, #fafafa, #eeeeee);
  background-image: linear-gradient(top, #fafafa, #eeeeee);
  filter: progid:dximagetransform.microsoft.gradient(GradientType=0, StartColorStr='#fafafa', EndColorStr='#eeeeee');
  border: 1px solid #CCC;
  margin-left: -1px;
  margin-top: -1px;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-box-shadow: 5px 0px 4px -5px #000000, 0px 0px 0px 0px #000000;
  -moz-box-shadow: 5px 0px 4px -5px rgba(0, 0, 0, 0.3), 0px 0px 0px 0px #000000;
  box-shadow: 5px 0px 4px -5px rgba(0, 0, 0, 0.3), 0px 0px 0px 0px #000000;
}
.toggle input[type=checkbox] {
  display: none;
}
.toggle input[type=checkbox]:checked ~ label .toggle-button {
  background-color: #2d71c2;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#2d71c2), to(#4ea1db));
  background-image: -webkit-linear-gradient(top, #2d71c2, #4ea1db);
  background-image: -moz-linear-gradient(top, #2d71c2, #4ea1db);
  background-image: -o-linear-gradient(top, #2d71c2, #4ea1db);
  background-image: -ms-linear-gradient(top, #2d71c2, #4ea1db);
  background-image: linear-gradient(top, #2d71c2, #4ea1db);
  filter: progid:dximagetransform.microsoft.gradient(GradientType=0, StartColorStr='#2d71c2', EndColorStr='#4ea1db');
}
.toggle input[type=checkbox]:checked ~ label .toggle-button .toggle-tab {
  margin-left: 39px;
  -webkit-box-shadow: -5px 0px 4px -5px #000000, 0px 0px 0px 0px #000000;
  -moz-box-shadow: -5px 0px 4px -5px rgba(0, 0, 0, 0.3), 0px 0px 0px 0px #000000;
  box-shadow: -5px 0px 4px -5px rgba(0, 0, 0, 0.3), 0px 0px 0px 0px #000000;
}​

Hoffe das hilft

Ich würde gerne eine Klasse in Ihrem CSS verwenden, die den Rahmenstil oder die Rahmenbreite ändert, wenn die Schaltfläche gedrückt wird, sodass sie wie eine Umschalttaste aussieht.

Versuchen Sie dieses Bit:

input type="button" 
                           data-bind="css:{on:toggleButton, off:toggleButton!=true},value:toggleButton,click: function() { $data.toggleButton(!($data.toggleButton()))}" />

in viewModel
self.toggleButton = ko.observable(false);

Es gibt ein JQuery-Plugin von Swizec , das dies unter anderem kann: https://github.com/Swizec/styled-button

(Der alte Link war http://swizec.com/code/styledButton/ . Ich habe den Ersatz nicht vollständig getestet, sondern nur mit Google gefunden.)

Sie können die "aktive" Pseudoklasse verwenden (sie funktioniert jedoch unter IE6 nicht für andere Elemente als Links).

a:active
{
    ...desired style here...
}

Hier ist eines der Beispiele / Varianten (ausführlicher beschrieben) von ToggleButton unter Verwendung von jQuery mit <label for="input">Implementierung.

Zuerst erstellen wir einen Container für unseren ToggleButton mit klassischem HTML <input>und<label>

<span>
  <input type="checkbox" value="1" name="some_feature_to_select" id="feature_cb" style="display: none;"> <!-- We can hide checkbox bec. we want <label> to be a ToggleButton, so we don't need to show it. It is used as our value holder -->
  <label for="feature_cb" id="label_for_some_feature">
    <img alt="Stylish image" src="/images/icons/feature.png">
  </label>
</span>

Als nächstes definieren wir die Funktion zum Umschalten unserer Taste. Unser Knopf ist eigentlich der übliche, <label>den wir stylen werden, um das Umschalten des Wertes darzustellen.

function toggleButton(button) {

var _for = button.getAttribute('for'); // defining for which element this label is (suppose element is a checkbox (bec. we are making ToggleButton ;) )
var _toggleID = 'input#'+_for; // composing selector ID string to select our toggle element (checkbox)
var _toggle = $( _toggleID ); // selecting checkbox to work on
var isChecked = !_toggle.is(':checked'); // defining the state with negation bec. change value event will have place later, so we negating current state to retrieve inverse (next).

if (isChecked)
    $(button).addClass('SelectedButtonClass'); // if it is checked -> adding nice class to our button (<label> in our case) to show that value was toggled
else
    $(button).removeClass('SelectedButtonClass'); // if value (or feature) was unselected by clicking the button (<label>) -> removing .SelectedButtonClass (or simply removing all classes from element)
}

Die Funktion wird wiederverwendbar implementiert. Sie können es für mehr als einen, zwei oder sogar drei von Ihnen erstellte ToggleButtons verwenden.

... und schließlich ... damit es wie erwartet funktioniert, sollten wir die Umschaltfunktion an ein Ereignis ("Änderungs" -Ereignis) unserer improvisierten <label>Schaltfläche binden (es wird ein clickEreignis sein, da wir das nicht checkboxdirekt ändern , also kein changeEreignis kann gefeuert werden für <label>).

$(document).ready(function(){

    $("#some_feature_label").click(function () {
        toggleButton(this); // call function with transmitting instance of a clicked label and let the script decide what was toggled and what to do with it
    });

    $("#some_other_feature_label").click(function () {
        toggleButton(this); // doing the same for any other feature we want to represent in a way of ToggleButton
    });

});

Mit CSS können wir definieren backgorund-imageoder einige border, um die Wertänderung darzustellen, während <label>wir die Aufgabe übernehmen, den Wert eines Kontrollkästchens zu ändern;).

Hoffe das hilft jemandem.

Versuchen;

<li>Text To go with Toggle Button<span class = 'toggle'><input type = 'checkbox' class = 'toggle' name = 'somename' id = 'someid' /></span></li>

Und stellen Sie sicher, in der

<head><link rel = 'stylesheet' src = 'theme.css'> (from jqtouch - downloadable online)
      <link rel = 'text/javascript' src = 'jquery.js'> (also from jqtouch)
</head>

Denken Sie daran, wenn Sie dies nur codieren somenameund someiddas Eingabe-Tag ändern können, sonst funktioniert es nicht.

Soweit ich auch nach Antworten suchte und diese mit CSS erreichen wollte. Ich habe eine Lösung von CSS NINJA gefunden. Es ist eine schöne Weiterentwicklung <input type="checkbox">und eine CSS- Live-Demo ! Obwohl es in IE 8 nicht funktioniert, können Sie selectivizr ! und fix CSS wo Anwendungen opacityzu , filterum es in IE zu arbeiten.

EDIT 2014:

Für neue Umschalttasten verwende ich eine Lösung, die im Lea Verou-Blog gefunden wurde und dem Kontrollkästchen für iOS optisch ähnlich ist