JqueryUI - Basculer la classe

Ce chapitre abordera les toggleClass()method, qui est une nouvelle classe utile pour la manipulation. La méthode toggleClass () ajoute ou supprime une ou plusieurs classes de chaque élément de l'ensemble des éléments correspondants.

Syntaxe

Ajouté dans la version 1.0 de jQueryUI

le toggleClass() La méthode a sa syntaxe de base comme suit -

.toggleClass( className [, switch ] [, duration ] [, easing ] [, complete ] )
N ° Sr. Paramètre et description
1

className

Ceci est une chaîne et représente le nom de classe CSS, ou une liste de noms de classe séparés par des espaces, à ajouter, supprimer ou basculer.
2

switch

Ceci est de type Boolean et s'il est spécifié, force la méthode toggleClass () à ajouter la classe si elle est vraie , ou à supprimer la classe si elle est fausse .
3

duration

Celui-ci est de type Number ou String et fournit facultativement l'un des effets lent, normal, rapide ou la durée de l'effet en millisecondes. En cas d'omission, la méthode animate () détermine la valeur par défaut. Sa valeur par défaut est 400 .
4

easing

Le nom de la fonction d'accélération à transmettre à la méthode animate ().
5

complete

Il s'agit d'une méthode de rappel appelée pour chaque élément lorsque l'effet est terminé pour cet élément.

Ajouté dans la version 1.9 de jQueryUI

Avec la version 1.9, cette méthode prend désormais en charge une option enfants , qui animera également les éléments descendants.

.toggleClass( className [, switch ] [, options ] )
N ° Sr. Paramètre et description
1

className

Ceci est une chaîne et représente le nom de classe CSS, ou une liste de noms de classe séparés par des espaces, à ajouter, supprimer ou basculer.
2

switch

Ceci est de type Boolean et s'il est spécifié, force la méthode toggleClass () à ajouter la classe si elle est vraie , ou à supprimer la classe si elle est fausse .
3

options

Cela représente tous les paramètres d'animation. Toutes les propriétés sont facultatives. Les valeurs possibles sont -

  • duration- Une chaîne ou un nombre déterminant la durée de l 'animation. Sa valeur par défaut est 400 .

  • easing- Une chaîne indiquant la fonction d'accélération à utiliser pour la transition. Sa valeur par défaut est swing . Les valeurs possibles sont ici .

  • complete - Il s'agit d'une méthode de rappel appelée pour chaque élément lorsque l'effet est terminé pour cet élément.

  • children - Ceci est une valeur booléenne et indique si l'animation doit également être appliquée à tous les descendants des éléments correspondants.

  • queue - Ceci est de type String / Boolean indiquant s'il faut placer l'animation dans la file d'attente des effets.

Exemples

L'exemple suivant illustre l'utilisation de la méthode toggleClass () .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Switch Class Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .class1 {
            border-width : 10px;
            border-color : grey;
            background-color : #cedc98;
            color : black;
         }
      </style>
      
      <script>
         function toggle () {
            $("#para").toggleClass ("class1", 1000);
         }
      </script>
   </head>
   
   <body>
      <button onclick = toggle()> Toggle </button>
      <p id = "para" style = border-style:solid> Welcome to Tutorials Point </p>
   </body>
</html>

Sauvegardons le code ci-dessus dans un fichier HTML toggleclassexample.htmet ouvrez-le dans un navigateur standard qui prend en charge javascript, vous devez également voir la sortie suivante. Maintenant, vous pouvez jouer avec le résultat -

Cliquez sur le bouton Basculer pour voir comment les classes CSS sont modifiées pour le texte.