web-dev-qa-db-fra.com

Comment créez-vous un bouton bascule?

Je veux créer un bouton bascule en HTML à l'aide de CSS. Je le veux pour que lorsque vous cliquez dessus, il reste enfoncé et que lorsque vous cliquez dessus, il ressortira.

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

jqueryhtmlcss
94
Donny V.

La bonne façon sémantique serait d'utiliser une case à cocher, puis de la styler de différentes manières si elle est cochée ou non. Mais il n'y a pas de bonne façon de le faire. Vous devez ajouter un extra span, extra div et, pour un look vraiment sympa, ajouter du javascript.

La meilleure solution consiste donc à 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 les 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>

Bien entendu, vous pouvez ajouter des images d’arrière-plan représentant le bouton haut et le bouton bas et rendre la couleur de fond transparente.

87
alexmeia

JQuery UI simplifie la création de boutons à bascule. Il suffit de mettre ceci

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

sur votre page, puis dans votre corps onLoad ou votre $.ready() (ou des littéraux d'objet init()) si vous construisez un site ajax ..) déposez un peu de JQuery comme ça :

$("#myToggleButton").button()

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

À partir de là, vous travaillez avec comme n'importe quel autre input="checkbox ", Car le contrôle sous-jacent reste tel quel, mais l'interface utilisateur de JQuery le réduit à l'apparence d'un joli bouton bascule à l'écran.

50
bkdraper

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

En combinaison avec this answer, vous pouvez également utiliser ce type de style qui s'apparente à toggler les paramètres mobiles.

togglers

[~ # ~] 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

19
Pierre de LESPINAY

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 obtenez le Gist). Pour être honnête, je ne prendrais pas la peine d'utiliser jQuery pour quelque chose d'aussi trivial.

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

Vous pouvez simplement utiliser toggleClass() pour suivre l'état. Ensuite, vous vérifiez si l’élément button 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'élément button pour les boutons pour des raisons sémantiques.

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

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

Edit: La méthode ci-dessus ne fonctionne pas très bien pour le basculement. Mais vous n'avez pas besoin d'utiliser jquery. Ecrivez une simple fonction javascript javascript pour l’élément, qui modifie l’image d’arrière-plan de manière à donner l’impression que le bouton est enfoncé et positionne un indicateur. Ensuite, lors du clic suivant, 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 si <div id="toggleDiv" onclick="toggle()">Some thing</div>

3
anand.trex

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

2
Galwegian

Je ne pense pas que l’utilisation de JS pour créer un bouton soit une bonne pratique. Que se passe-t-il 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 définir 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

2
Titouan de Bailleul

Il y a un plugin jquery par Swizec , qui peut le faire entre autres choses: https://github.com/Swizec/styled-button

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

1
Nickolay

Essayez ce 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);
1
Peter

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

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

Rappelez-vous que lorsque vous codez ceci, seulementsomename et someid peuvent changer dans la balise input, sinon cela ne fonctionnera pas.

0
user1703470

Vous pouvez utiliser la pseudo-classe "active" (cela ne fonctionnera pas sur IE6, toutefois, pour les éléments autres que les liens)

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

Aussi loin que je cherchais une réponse aussi, je voulais le compléter avec CSS. J'ai trouvé la solution par CSS NINJA C'est une belle impelmentation de <input type="checkbox"> et quelques css Démonstration en direct ! Bien que cela ne fonctionne pas dans IE 8, vous pouvez implémenter selectivizr ! Et corriger CSS où opacity to filter pour le faire fonctionner dans IE.

EDIT 2014:

j'utilise la solution trouvée sur le blog de Lea Verou visuellement similaire à la case à cocher iOS.

0
Aivaras Prudnikovas

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

Premièrement, nous allons créer un conteneur pour notre ToggleButton en utilisant 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 permettant de basculer notre bouton. Notre bouton est en fait l'habituel <label> que nous allons appeler 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 voire même trois boutons Toggle 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 "de changement") de notre <label> bouton (ce sera click événement car nous ne modifions pas le checkbox directement, donc aucun événement change ne peut être déclenché 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-image ou border pour représenter le changement de valeur tandis que <label> fera le travail pour nous en modifiant la valeur d'une case à cocher;).

J'espère que ça aide quelqu'un.

0
Paul T. Rawkeen