JqueryUI - Supprimer la classe
Ce chapitre abordera les removeClass()méthode, qui est l'une des méthodes utilisées pour gérer les effets visuels jQueryUI. removeClass () supprime les classes appliquées des éléments.
removeClass () supprime les classes spécifiées vers les éléments correspondants tout en animant toutes les modifications de style.
Syntaxe
Ajouté dans la version 1.0 de jQueryUI
le removeClass() La méthode a sa syntaxe de base comme suit -
.removeClass( 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) à supprimer. |
| 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.
.removeClass( 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 -
|
Exemples
L'exemple suivant illustre l'utilisation des méthodes removeClass () .
Passer une classe unique
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>jQuery UI removeClass 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 removeclassexample.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.