JqueryUI - Ajouter une classe

Ce chapitre abordera les addClass()méthode, qui est l'une des méthodes utilisées pour gérer les effets visuels jQueryUI. La méthode addClass () permet d'animer les modifications des propriétés CSS.

La méthode addClass () ajoute des classes spécifiées aux éléments correspondants tout en animant tous les changements de style.

Syntaxe

Ajouté dans la version 1.0 de jQueryUI

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

.addClass( className [, duration ] [, easing ] [, complete ] )

N ° Sr.	Paramètre et description
1	className Il s'agit d'une chaîne contenant une ou plusieurs classes CSS (séparées par des espaces).
2	duration Il est de type Number ou String et indique le nombre de millisecondes de l'effet. Une valeur de 0 prend l'élément directement dans le nouveau style, sans progression. Sa valeur par défaut est 400 .
3	easing Celui-ci est de type String et indique la manière de progresser dans l'effet. Sa valeur par défaut est swing . Les valeurs possibles sont ici .
4	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.

.addClass( className [, options ] )

N ° Sr.	Paramètre et description
1	className Il s'agit d'une chaîne contenant une ou plusieurs classes CSS (séparées par des espaces).
2	options Cela représente tous les paramètres d'animation. Toutes les propriétés sont facultatives. Les valeurs possibles sont - duration- Il est de type Number ou String et indique le nombre de millisecondes de l'effet. Une valeur de 0 prend l'élément directement dans le nouveau style, sans progression. Sa valeur par défaut est 400 . easing- Celui-ci est de type String et indique la manière de progresser dans l'effet. 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 de type Boolean et indique si l'animation doit en plus être appliquée à tous les descendants des éléments correspondants. Sa valeur par défaut est false . queue- Il est de type Boolean ou String et indique s'il faut placer l'animation dans la file d'attente des effets. Sa valeur par défaut est true .

Exemples

L'exemple suivant illustre l'utilisation des méthodes addClass () .

Passer une classe unique

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI addClass 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>
      
      <style>
         .elemClass {
            width: 200px;
            height: 50px;
            background-color: #b9cd6d;
         }
         .myClass {
            font-size: 40px; background-color: #ccc; color: white;
         }
      </style>
      
      <script type = "text/javascript">
         $(document).ready(function() {
            $('.button').click(function() {
               if (this.id == "add") {
                  $('#animTarget').addClass("myClass", "fast")
               } else {
               $('#animTarget').removeClass("myClass", "fast")
               }
            })
         });
      </script>
   </head>
   
   <body>
      <div id = animTarget class = "elemClass">
         Hello!
      </div>
      <button class = "button" id = "add">Add Class</button>
      <button class = "button" id = "remove">Remove Class</button>
   </body>
</html>

Sauvegardons le code ci-dessus dans un fichier HTML addclassexample.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 les boutons Ajouter une classe et Supprimer une classe pour voir l'effet des classes sur la boîte.

Passer plusieurs cours

Cet exemple montre comment transmettre plusieurs classes à la méthode addClass .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI addClass 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>
         .red { color: red; }
         .big { font-size: 5em; }
         .spaced { padding: 1em; }
      </style>
      
      <script>
         $(document).ready(function() {
            $('.button-1').click(function() {
               $( "#welcome" ).addClass( "red big spaced", 3000 );
            });
         });
      </script>
   </head>
   
   <body>
      <p id = "welcome">Welcome to Tutorials Point!</p>
      <button class = "button-1">Click me</button>
   </body>
</html>