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?
Réponses:
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>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.
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.
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>En combinaison avec cette réponse, vous pouvez également utiliser ce type de style qui ressemble à un basculeur de paramètres mobiles.
HTML
<a href="#" class="toggler"> </a>
<a href="#" class="toggler off"> </a>
<a href="#" class="toggler"> </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
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>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>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>
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.
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
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.)
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...
}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.
.addClass()/, .removeClass()vous pouvez utiliser .toggleClass(), mais la méthode décrite définit explicitement les actions pour checked/ uncheckedvalues.
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.
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