Je veux créer un bouton de basculement en html à l'aide de css. Je veux que lorsque l'on clique dessus, il reste enfoncé et que lorsque l'on clique à nouveau dessus, il s'ouvre.
S'il n'y a pas moyen de le faire, utilisez simplement le css. Y a-t-il un moyen de le faire en utilisant JQuery ?
La bonne méthode sémantique consisterait à utiliser une case à cocher, puis à lui donner un style différent selon qu'elle est cochée ou non. Mais il n'y a pas de bonnes façons de le faire. Il faut ajouter des span supplémentaires, des div supplémentaires 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 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>Évidemment, vous pouvez ajouter des images d'arrière-plan qui représentent le bouton haut et le bouton bas, et rendre la couleur d'arrière-plan transparente.
Voici un JS qui manipule ce code pour que vous puissiez l'essayer en direct... jsfiddle.net/LmULE
Pour info : J'ai fait la même chose que ce post, mais en utilisant Google Dart. steelpinjata.com/2014/03/20/toggle-buttons-in-dart . Note : fonctionne dans Chromium, mais peut être compilé en JavaScript et fonctionnera dans d'autres navigateurs modernes. IE ne compte pas comme un navigateur ;-)
JQuery UI facilite la création de boutons à bascule. Il suffit de mettre ce
<label for="myToggleButton">my toggle button caption</label>
<input type="checkbox" id="myToggleButton" />sur votre page et ensuite dans votre corps onLoad ou votre $.ready() (ou des littéraux d'objets init() si vous construisez un site ajax ) déposez un peu de JQuery comme ceci :
$("#myToggleButton").button()c'est ça. (n'oubliez pas le < label for=...> parce que JQueryUI l'utilise pour le corps du bouton de basculement).
A partir de là, vous travaillez avec comme n'importe quel autre input="checkbox "car c'est ce que le contrôle sous-jacent est toujours, mais JQuery UI l'habille simplement pour qu'il ressemble à un joli bouton de basculement à l'écran.
En combinaison avec este Vous pouvez également utiliser ce type de style qui ressemble à un interrupteur 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');
});
});Ça pourrait être beaucoup plus joli, mais ça donne l'idée.
L'un des avantages est qu'il peut être animé à l'aide de CSS.
Fiddler
Si vous voulez un vrai bouton, vous aurez besoin de javascript. Quelque chose comme ceci (il faut travailler sur le style mais vous avez compris l'essentiel). Pour être honnête, je ne m'embêterais pas à 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>
Vous pouvez simplement utiliser toggleClass() à l'état de piste. 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 le button pour les boutons, pour des raisons sémantiques.
<button class="toggler">Toggle me</button> Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
0 votes
J'ai écrit un tutoriel sur la façon de créer des interrupteurs marche/arrêt avec CSS3 uniquement, sans JS. Vous pouvez voir ici la démo
0 votes
Voici un tutoriel sur Comment créer un plugin JQuery pour convertir les boutons radio en boutons à bascule ? y Vous pouvez voir ici la démo