Boutons à bascule : HTML sémantique ou style jQuery personnalisé – Quel est le meilleur ?

Création de boutons à bascule : options sémantiques ou élégantes

Les boutons à bascule permettent aux utilisateurs d'alterner entre deux états. Bien que HTML inclue nativement des entrées de cases à cocher, elles peuvent ne pas toujours répondre aux exigences visuelles souhaitées.

Approche sémantique : style de case à cocher

L'approche sémantique recommandée implique l'utilisation d'une case à cocher et d'un style. différemment en fonction de son état vérifié. Cependant, styliser efficacement une case à cocher peut s'avérer difficile.

Alternative : jQuery et CSS

Pour une solution plus personnalisable, envisagez d'utiliser jQuery et CSS :

1. Attribuer un événement Toggle :

   • Ajoutez un gestionnaire d'événements jQuery au bouton, généralement en utilisant .click().

2. Basculer les classes CSS :

   • Utilisez .toggleClass() pour ajouter et supprimer des classes CSS qui modifient l'apparence du bouton (par exemple, "down").

3. Style CSS :

   • Créez des classes CSS avec différents styles de bordure et d'arrière-plan pour chaque état de bouton (par exemple, " haut" et "bas").

Exemple :

<code class="js">$(document).ready(function() {
  $('a#button').click(function() {
    $(this).toggleClass("down");
  });
});</code>

<code class="css">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;
}</code>

<code class="html"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="button" title="button">Press Me</a></code>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!