Comment créer un bouton bascule?

Question 1

Je veux créer un bouton bascule en html en utilisant css. Je le veux pour que lorsque vous cliquez dessus, il reste enfoncé et que lorsque vous cliquez dessus à nouveau, il ressort.

S'il n'y a aucun moyen de le faire simplement en utilisant css. Existe-t-il un moyen de le faire en utilisant jQuery?

Question 2

La bonne manière sémantique serait d'utiliser une case à cocher, puis de la styliser de différentes manières si elle est cochée ou non. Mais il n'y a pas de bons moyens d'y parvenir. Vous devez ajouter une durée supplémentaire, une div supplémentaire et, pour un look vraiment sympa, ajouter du javascript.

La meilleure solution est donc d'utiliser une petite fonction jQuery et deux images d'arrière-plan pour styliser les deux statuts différents du bouton. Exemple avec un effet haut / bas donné par des bordures:

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

Développer l'extrait

De toute évidence, vous pouvez ajouter des images d'arrière-plan qui représentent le bouton haut et bouton bas, et rendre la couleur d'arrière-plan transparente.

Question 3

L'interface utilisateur JQuery simplifie la création de boutons à bascule. Juste mettre ça

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

sur votre page puis dans votre corps onLoadou votre $.ready()(ou certains objets littéraux init()fonctionnent si vous construisez un site ajax ..) déposez un JQuery comme ceci:

$("#myToggleButton").button()

c'est tout. (n'oubliez pas le < label for=...>car JQueryUI l'utilise pour le corps du bouton bascule ..)

À partir de là, vous travaillez simplement avec comme n'importe quel autre input="checkbox"parce que c'est toujours ce que le contrôle sous-jacent est, mais JQuery UI le fait simplement ressembler à un joli bouton à bascule à l'écran.

Question 4

voici un exemple utilisant 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>

Développer l'extrait

Question 5

En combinaison avec cette réponse, vous pouvez également utiliser ce type de style qui ressemble à un basculeur de paramètres mobiles.

bascule

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

Pourrait être beaucoup plus joli, mais donne l'idée.
Un avantage est qu'il peut être animé avec jquery et / ou CSS3
Fiddler

Question 6

Si vous voulez un bouton approprié, vous aurez besoin de javascript. Quelque chose comme ça (nécessite un peu de travail sur le style mais vous comprenez l'essentiel). Je ne prendrais pas la peine d'utiliser jquery pour quelque chose d'aussi trivial pour être honnête.

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

Question 7

Vous pouvez simplement utiliser toggleClass()pour suivre l'état. Ensuite, vous vérifiez si l'élément bouton a la classe, comme ceci:

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

Et j'utilise l' buttonélément pour les boutons pour des raisons sémantiques.

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

Question 8

Vous pouvez utiliser un élément d'ancrage ( <a></a>) et utiliser a: active et a: link pour changer l'image d'arrière-plan pour l'activer ou la désactiver. Juste une pensée.

Edit: La méthode ci-dessus ne fonctionne pas très bien pour basculer. Mais vous n'avez pas besoin d'utiliser jquery. Écrivez une simple fonction javascript onClick pour l'élément, qui change l'image d'arrière-plan de manière appropriée pour donner l'impression que le bouton est enfoncé, et définissez un indicateur. Ensuite, au prochain clic, l'image et le drapeau sont inversés. Ainsi

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

Et le html comme ça <div id="toggleDiv" onclick="toggle()">Some thing</div>

Question 9

Je ne pense pas que l'utilisation de JS pour créer un bouton soit une bonne pratique. Que faire si le navigateur de l'utilisateur désactive JavaScript?

De plus, vous pouvez simplement utiliser une case à cocher et un peu de CSS pour le faire. Et il est facile de récupérer l'état de votre case à cocher.

Ce n'est qu'un exemple, mais vous pouvez le styliser comme vous le souhaitez.

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

J'espère que cela t'aides

Question 10

Je serais enclin à utiliser une classe dans votre css qui modifie le style de la bordure ou la largeur de la bordure lorsque le bouton est enfoncé, ce qui donne l'apparence d'un bouton à bascule.

Question 11

Essayez ceci:

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

Question 12

Il existe un plugin jquery de Swizec , qui peut le faire entre autres: https://github.com/Swizec/styled-button

(L'ancien lien était http://swizec.com/code/styledButton/ , je n'ai pas complètement testé le remplacement, je l'ai juste trouvé avec Google.)

Question 13

Vous pouvez utiliser la pseudoclasse "active" (cela ne fonctionnera pas sur IE6, cependant, pour les éléments autres que les liens)

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

Question 14

Voici l'un des exemples / variantes (décrits plus en détail) de ToggleButton utilisant jQuery avec <label for="input">implémentation.

Nous allons d'abord créer un conteneur pour notre ToggleButton en utilisant du HTML classique <input>et<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>

Ensuite, nous définirons la fonction pour basculer notre bouton. Notre bouton est en fait l'habituel <label>que nous allons styliser pour représenter le basculement de valeur.

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 fonction est implémentée de manière réutilisable. Vous pouvez l'utiliser pour plus d'un, deux ou même trois ToggleButtons que vous avez créés.

... et enfin ... pour que cela fonctionne comme prévu, nous devrions lier la fonction bascule à un événement (événement "change") de notre <label>bouton improvisé (ce sera un clickévénement car nous ne modifions pas checkboxdirectement, donc aucun changeévénement peut être renvoyé pour <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
    });

});

Avec CSS, nous pouvons définir backgorund-imageou certains borderpour représenter le changement de valeur tout <label>en faisant le travail pour nous en modifiant la valeur d'une case à cocher;).

J'espère que cela aide quelqu'un.

Question 15

Essayer;

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

Et assurez-vous que dans le

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

Souvenez-vous que lorsque vous codez ceci, seulement somename et que vous someidpouvez changer dans la balise d'entrée, sinon cela ne fonctionne pas.

Question 16

Dans la mesure où je cherchais une réponse aussi, et je voulais l'accomplir avec CSS. J'ai trouvé une solution par CSS NINJA C'est une belle impelmentation <input type="checkbox">et une démo css Live ! Bien que cela ne fonctionne pas dans IE 8, vous pouvez implémenter selectivizr ! et corrigez le CSS où il est utilisé opacitypour filterle faire fonctionner dans IE.

EDIT 2014:

pour les nouveaux boutons à bascule, j'utilise la solution trouvée sur le blog Lea Verou visuellement similaire à la case iOS

Answer 1

98

Je veux créer un bouton bascule en html en utilisant css. Je le veux pour que lorsque vous cliquez dessus, il reste enfoncé et que lorsque vous cliquez dessus à nouveau, il ressort.

S'il n'y a aucun moyen de le faire simplement en utilisant css. Existe-t-il un moyen de le faire en utilisant jQuery?

jquery html css Donny V.
la source

J'ai écrit un tutoriel sur la façon de créer des commutateurs marche / arrêt avec CSS3 uniquement, aucun JS n'est nécessaire. Ici vous pouvez voir la démo

Felix Hagspiel

Voici un tutoriel sur Comment créer un plugin JQuery pour convertir des boutons radio en boutons à bascule et ici vous pouvez voir une démo

Gopal Joshi

Answer 2

J'ai écrit un tutoriel sur la façon de créer des commutateurs marche / arrêt avec CSS3 uniquement, aucun JS n'est nécessaire. Ici vous pouvez voir la démo

Felix Hagspiel

Answer 3

Voici un tutoriel sur Comment créer un plugin JQuery pour convertir des boutons radio en boutons à bascule et ici vous pouvez voir une démo

Gopal Joshi

Answer 4

La bonne manière sémantique serait d'utiliser une case à cocher, puis de la styliser de différentes manières si elle est cochée ou non. Mais il n'y a pas de bons moyens d'y parvenir. Vous devez ajouter une durée supplémentaire, une div supplémentaire et, pour un look vraiment sympa, ajouter du javascript.

La meilleure solution est donc d'utiliser une petite fonction jQuery et deux images d'arrière-plan pour styliser les deux statuts différents du bouton. Exemple avec un effet haut / bas donné par des bordures:

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

Développer l'extrait

De toute évidence, vous pouvez ajouter des images d'arrière-plan qui représentent le bouton haut et bouton bas, et rendre la couleur d'arrière-plan transparente.

Answer 5

17

Voici un violon JS avec ce code pour que vous puissiez l'essayer en direct ... jsfiddle.net/LmULE

Evan

Answer 6

FYI: J'ai fait la même chose que ce post, en utilisant uniquement Google Dart steelpinjata.com/2014/03/20/toggle-buttons-in-dart . Remarque: fonctionne dans Chromium, mais peut être compilé en JavaScript et fonctionnera dans d'autres navigateurs modernes. IE ne compte pas comme un navigateur ;-)

Serge Merzliakov

Answer 7

L'interface utilisateur JQuery simplifie la création de boutons à bascule. Juste mettre ça

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

sur votre page puis dans votre corps onLoadou votre $.ready()(ou certains objets littéraux init()fonctionnent si vous construisez un site ajax ..) déposez un JQuery comme ceci:

$("#myToggleButton").button()

c'est tout. (n'oubliez pas le < label for=...>car JQueryUI l'utilise pour le corps du bouton bascule ..)

À partir de là, vous travaillez simplement avec comme n'importe quel autre input="checkbox"parce que c'est toujours ce que le contrôle sous-jacent est, mais JQuery UI le fait simplement ressembler à un joli bouton à bascule à l'écran.

Answer 8

Étant donné que l'OP a ajouté la balise jquery, c'est une excellente réponse. Étant donné que jqueryUI pourrait être utilisé pour fournir un style congruent.

Joe Johnston

Answer 9

voici un exemple utilisant 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>

Développer l'extrait

Answer 10

En combinaison avec cette réponse, vous pouvez également utiliser ce type de style qui ressemble à un basculeur de paramètres mobiles.

bascule

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

Pourrait être beaucoup plus joli, mais donne l'idée.
Un avantage est qu'il peut être animé avec jquery et / ou CSS3
Fiddler

Answer 11

Si vous voulez un bouton approprié, vous aurez besoin de javascript. Quelque chose comme ça (nécessite un peu de travail sur le style mais vous comprenez l'essentiel). Je ne prendrais pas la peine d'utiliser jquery pour quelque chose d'aussi trivial pour être honnête.

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

Answer 12

Vous pouvez simplement utiliser toggleClass()pour suivre l'état. Ensuite, vous vérifiez si l'élément bouton a la classe, comme ceci:

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

Et j'utilise l' buttonélément pour les boutons pour des raisons sémantiques.

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

Answer 13

Vous pouvez utiliser un élément d'ancrage ( <a></a>) et utiliser a: active et a: link pour changer l'image d'arrière-plan pour l'activer ou la désactiver. Juste une pensée.

Edit: La méthode ci-dessus ne fonctionne pas très bien pour basculer. Mais vous n'avez pas besoin d'utiliser jquery. Écrivez une simple fonction javascript onClick pour l'élément, qui change l'image d'arrière-plan de manière appropriée pour donner l'impression que le bouton est enfoncé, et définissez un indicateur. Ensuite, au prochain clic, l'image et le drapeau sont inversés. Ainsi

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

Et le html comme ça <div id="toggleDiv" onclick="toggle()">Some thing</div>

Answer 14

Je ne pense pas que l'utilisation de JS pour créer un bouton soit une bonne pratique. Que faire si le navigateur de l'utilisateur désactive JavaScript?

De plus, vous pouvez simplement utiliser une case à cocher et un peu de CSS pour le faire. Et il est facile de récupérer l'état de votre case à cocher.

Ce n'est qu'un exemple, mais vous pouvez le styliser comme vous le souhaitez.

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

J'espère que cela t'aides

Answer 15

Je serais enclin à utiliser une classe dans votre css qui modifie le style de la bordure ou la largeur de la bordure lorsque le bouton est enfoncé, ce qui donne l'apparence d'un bouton à bascule.

Answer 16

Essayez ceci:

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

Answer 17

Il existe un plugin jquery de Swizec , qui peut le faire entre autres: https://github.com/Swizec/styled-button

(L'ancien lien était http://swizec.com/code/styledButton/ , je n'ai pas complètement testé le remplacement, je l'ai juste trouvé avec Google.)

Answer 18

0

Vous pouvez utiliser la pseudoclasse "active" (cela ne fonctionnera pas sur IE6, cependant, pour les éléments autres que les liens)

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

pilsetnieks
la source

Answer 19

Voici l'un des exemples / variantes (décrits plus en détail) de ToggleButton utilisant jQuery avec <label for="input">implémentation.

Nous allons d'abord créer un conteneur pour notre ToggleButton en utilisant du HTML classique <input>et<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>

Ensuite, nous définirons la fonction pour basculer notre bouton. Notre bouton est en fait l'habituel <label>que nous allons styliser pour représenter le basculement de valeur.

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 fonction est implémentée de manière réutilisable. Vous pouvez l'utiliser pour plus d'un, deux ou même trois ToggleButtons que vous avez créés.

... et enfin ... pour que cela fonctionne comme prévu, nous devrions lier la fonction bascule à un événement (événement "change") de notre <label>bouton improvisé (ce sera un clickévénement car nous ne modifions pas checkboxdirectement, donc aucun changeévénement peut être renvoyé pour <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
    });

});

Avec CSS, nous pouvons définir backgorund-imageou certains borderpour représenter le changement de valeur tout <label>en faisant le travail pour nous en modifiant la valeur d'une case à cocher;).

J'espère que cela aide quelqu'un.

Answer 20

+ cette implémentation semble également fonctionner correctement sur les appareils mobiles, bec. L'implémentation CCS proposée ci-dessus par TDeBailleul ne fonctionnait pas correctement sur Android (navigateur par défaut Android 2.3.5; Opera Mobile sur le même système était OK).

Paul T. Rawkeen

Answer 21

De plus, au lieu de .addClass()/, .removeClass()vous pouvez utiliser .toggleClass(), mais la méthode décrite définit explicitement les actions pour checked/ uncheckedvalues.

Paul T.Rawkeen

Answer 22

Essayer;

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

Et assurez-vous que dans le

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

Souvenez-vous que lorsque vous codez ceci, seulement somename et que vous someidpouvez changer dans la balise d'entrée, sinon cela ne fonctionne pas.

Answer 23

Dans la mesure où je cherchais une réponse aussi, et je voulais l'accomplir avec CSS. J'ai trouvé une solution par CSS NINJA C'est une belle impelmentation <input type="checkbox">et une démo css Live ! Bien que cela ne fonctionne pas dans IE 8, vous pouvez implémenter selectivizr ! et corrigez le CSS où il est utilisé opacitypour filterle faire fonctionner dans IE.

EDIT 2014:

pour les nouveaux boutons à bascule, j'utilise la solution trouvée sur le blog Lea Verou visuellement similaire à la case iOS

Comment créer un bouton bascule?

Réponses: