JqueryUI - Classe de commutateur

Ce chapitre abordera les switchClass()method, qui est une nouvelle classe utile pour la manipulation. La méthode switchClass () se déplace d'une classe CSS d'une classe CSS à une autre, animant la transition d'un état à l'autre.

Syntaxe

Ajouté dans la version 1.0 de jQueryUI

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

.switchClass( removeClassName, addClassName [, duration ] [, easing ] [, complete ] )
N ° Sr. Paramètre et description
1

removeClassName

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, à supprimer.

2

addClassName

Ceci est de type String et représente un ou plusieurs noms de classe (séparés par des espaces) à ajouter à l'attribut de classe de chaque élément correspondant.

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.

.switchClass( removeClassName, addClassName [, options ] )
N ° Sr. Paramètre et description
1

removeClassName

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, à supprimer.

2

addClassName

Ceci est de type String et représente un ou plusieurs noms de classe (séparés par des espaces) à ajouter à l'attribut de classe de chaque élément correspondant.

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 - C'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 switchClass () .

<!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>
         .LargeClass {
            font-family: Arial;
            font-size: large;
            font-weight: bold;
            color: Red;
         }
         .NormalClass {
            font-family: Arial;
            font-size: small;
            font-weight: bold;
            color: Blue;
         }
      </style>
      
      <script>
         $(function() {
            $('#btnSwitch').click(function() {
               $(".NormalClass").switchClass("NormalClass","LargeClass",'fast');
               $(".LargeClass").switchClass("LargeClass","NormalClass",'fast');
               return false;
            });
         });
      </script>
   </head>
   
   <body>
      <div class = "NormalClass">
         Tutorials Point Rocks!!!
      </div>
      <div class = "NormalClass">
         Welcome to Tutorials Point!!!
      </div>
      <br />
      <input type = "button" id = "btnSwitch" value = "Switch Class" />
   </body>
</html>

Sauvegardons le code ci-dessus dans un fichier HTML switchclassexample.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 Changer de classe pour voir l'effet des classes sur la boîte.