Come si crea un pulsante di attivazione / disattivazione?

Voglio creare un pulsante di attivazione / disattivazione in html usando css. Lo voglio in modo che quando fai clic su di esso, rimanga premuto e poi quando lo fai di nuovo clic su di esso esce fuori.

Se non c'è modo di farlo, basta usare css. C'è un modo per farlo usando jQuery?

Il buon modo semantico sarebbe quello di utilizzare una casella di controllo e quindi modellarla in modi diversi se è selezionata o meno. Ma non ci sono buoni modi per farlo. Devi aggiungere span extra, div extra e, per un aspetto davvero carino, aggiungere un po 'di javascript.

Quindi la soluzione migliore è usare una piccola funzione jQuery e due immagini di sfondo per applicare lo stile ai due diversi stati del pulsante. Esempio con un effetto su / giù dato dai bordi:

$(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>

Ovviamente, puoi aggiungere immagini di sfondo che rappresentano il pulsante su e il pulsante giù e rendere trasparente il colore di sfondo.

L'interfaccia utente di JQuery semplifica la creazione di pulsanti di attivazione / disattivazione. Metti solo questo

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

sulla tua pagina e poi nel tuo corpo onLoado il tuo $.ready()(o qualche init()funzione di oggetti letterali se stai costruendo un sito ajax ..) rilascia un po 'di JQuery in questo modo:

$("#myToggleButton").button()

questo è tutto. (non dimenticare il < label for=...>perché JQueryUI lo usa per il corpo del pulsante di attivazione ..)

Da lì si lavora con esso come qualsiasi altro input="checkbox"perché questo è ciò che è ancora il controllo sottostante, ma l'interfaccia utente di JQuery lo skin solo per sembrare un grazioso pulsante di attivazione / disattivazione sullo schermo.

ecco un esempio che utilizza 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 combinazione con questa risposta, puoi anche utilizzare questo tipo di stile che è come il commutatore delle impostazioni mobili.

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');
    });
});

Potrebbe essere molto più carino, ma dà l'idea.
Un vantaggio è che può essere animato con jquery e / o CSS3
Fiddler

Se vuoi un pulsante corretto, avrai bisogno di javascript. Qualcosa di simile (necessita di un po 'di lavoro sullo stile ma ottieni il succo). Non mi preoccuperei di usare jquery per qualcosa di così banale ad essere onesti.

<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>

Puoi semplicemente usare toggleClass()per monitorare lo stato. Quindi controlli se l'elemento button ha la classe, in questo modo:

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

E utilizzo l' buttonelemento per i pulsanti per ragioni semantiche.

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

È possibile utilizzare un elemento di ancoraggio ( <a></a>) e utilizzare a: active e a: link per modificare l'immagine di sfondo da attivare o disattivare. Solo un pensiero.

Modifica: il metodo sopra non funziona troppo bene per l'attivazione. Ma non è necessario utilizzare jquery. Scrivi una semplice funzione javascript onClick per l'elemento, che cambia l'immagine di sfondo in modo appropriato per far sembrare che il pulsante sia premuto, e imposta un flag. Quindi, al clic successivo, l'immagine e la bandiera vengono ripristinate. Così

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;
}
}

E l'html in questo modo <div id="toggleDiv" onclick="toggle()">Some thing</div>

Non penso che usare JS per creare un pulsante sia una buona pratica. Cosa succede se il browser dell'utente disattiva JavaScript?

Inoltre, puoi semplicemente usare una casella di controllo e un po 'di CSS per farlo. Ed è facile recuperare lo stato della tua casella di controllo.

Questo è solo un esempio, ma puoi modellarlo come desideri.

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;
}​

Spero che questo ti aiuti

Sarei propenso a utilizzare una classe nel tuo CSS che altera lo stile del bordo o la larghezza del bordo quando il pulsante è premuto, quindi dà l'aspetto di un pulsante di attivazione / disattivazione.

Prova questo 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);

C'è un plugin jquery di Swizec , che può farlo tra le altre cose: https://github.com/Swizec/styled-button

(Il vecchio collegamento era http://swizec.com/code/styledButton/ , non ho testato completamente la sostituzione, l'ho appena trovato con Google.)

Puoi usare la pseudoclasse "attiva" (non funzionerà su IE6, però, per elementi diversi dai link)

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

Ecco uno degli esempi / varianti (descritti più dettagliatamente) di ToggleButton che utilizzano jQuery con l' <label for="input">implementazione.

Per prima cosa creeremo un contenitore per il nostro ToggleButton utilizzando HTML classico <input>e<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>

Successivamente definiremo la funzione per attivare o disattivare il nostro pulsante. Il nostro pulsante in realtà è il solito <label>che disegneremo per rappresentare il cambio di valore.

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)
}

La funzione è implementata in modo riutilizzabile. Puoi usarlo per più di uno, due o anche tre ToggleButton che hai creato.

... e infine ... per farlo funzionare come previsto, dovremmo associare la funzione di commutazione a un evento (evento di "modifica") del nostro <label>pulsante improvvisato (sarà l' clickevento perché non stiamo alterando checkboxdirettamente, quindi nessun changeevento può essere licenziato per <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
    });

});

Con i CSS possiamo definire backgorund-imageo alcuni borderper rappresentare il cambiamento di valore mentre <label>farà il lavoro per noi alterando il valore di una casella di controllo;).

Spero che questo aiuti qualcuno.

Provare;

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

E assicurati che nel file

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

Ricorda quando stai codificando questo, solo somename e someidpuoi cambiare nel tag di input, altrimenti non funziona.

Per quanto stavo cercando anche una risposta, e volevo completarla con CSS. Ho trovato la soluzione con CSS NINJA È una bella implementazione di <input type="checkbox">e alcuni css Live demo ! Sebbene non funzioni in IE 8, potresti implementare selectivizr ! e fix CSS dove usi opacityper filterfarlo funzionare in IE.

EDIT 2014:

per i nuovi pulsanti di attivazione / disattivazione utilizzo la soluzione trovata sul blog di Lea Verou visivamente simile alla casella di controllo iOS