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 -
|
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.