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