JqueryUI - Basculer

Ce chapitre abordera les toggle()méthode des effets visuels jQueryUI. toggle () bascule les méthodes show () ou hide () selon que l'élément est masqué ou non.

Syntaxe

le toggle() méthode a la syntaxe suivante -

.toggle( effect [, options ] [, duration ] [, complete ] )

Sr.No.	Paramètre et description
1	effect Ceci est une chaîne indiquant l'effet à utiliser pour la transition. Ceci est une chaîne et représente l'effet à utiliser lors du réglage de la visibilité de l'élément. Les effets sont répertoriés dans le tableau ci-dessous.
2	options Celui-ci est de type Object et indique les réglages et l' accélération spécifiques à l'effet . En outre, chaque effet a son propre ensemble d'options qui peuvent être spécifiées communes à plusieurs effets décrits dans le tableau Effets jQueryUI .
3	duration Il est de type Number ou String et détermine la durée de fonctionnement de l'animation. Sa valeur par défaut est 400 .
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.

Effets jQueryUI

Le tableau suivant décrit les différents effets pouvant être utilisés avec la méthode effects () -

Sr.No.	Effet et description
1	blind Affiche ou masque l'élément à la manière d'un store de fenêtre: en déplaçant le bord inférieur vers le bas ou vers le haut, ou le bord droit vers la droite ou la gauche, selon la direction et le mode spécifiés .
2	bounce Fait apparaître l'élément à rebondir dans le sens vertical ou horizontal, affichant ou masquant éventuellement l'élément.
3	clip Affiche ou masque l'élément en déplaçant les bordures opposées de l'élément ensemble jusqu'à ce qu'elles se rencontrent au milieu, ou vice versa.
4	drop Affiche ou masque l'élément en lui donnant l'impression de tomber ou de tomber sur la page.
5	explode Affiche ou masque l'élément en le divisant en plusieurs morceaux qui se déplacent dans des directions radiales comme s'ils implosaient ou explosaient de la page.
6	fade Affiche ou masque l'élément en ajustant son opacité. C'est la même chose que les effets de fondu de base, mais sans options.
sept	fold Affiche ou masque l'élément en ajustant les bordures opposées vers l'intérieur ou l'extérieur, puis en faisant de même pour l'autre ensemble de bordures.
8	highlight Attire l'attention sur l'élément en modifiant momentanément sa couleur d'arrière-plan tout en affichant ou en masquant l'élément.
9	puff Développe ou contracte l'élément en place tout en ajustant son opacité.
dix	pulsate Règle l'opacité de l'élément en marche et en arrêt avant de s'assurer que l'élément est affiché ou masqué comme spécifié.
11	scale Développe ou réduit l'élément d'un pourcentage spécifié.
12	shake Secoue l'élément d'avant en arrière, verticalement ou horizontalement.
13	size Redimensionne l'élément à une largeur et une hauteur spécifiées. Similaire à l'échelle, sauf pour la manière dont la taille cible est spécifiée.
14	slide Déplace l'élément de sorte qu'il semble glisser sur ou hors de la page.
15	transfer Animation d'un élément de contour transitoire qui donne l'impression que l'élément est transféré vers un autre élément. L'apparence de l'élément de contour doit être définie via des règles CSS pour la classe ui-effects-transfer, ou la classe spécifiée en option.

Exemple

L'exemple suivant illustre l'utilisation de la méthode toggle () avec un effet différent répertorié dans le tableau ci-dessus.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Toggle 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>
         .toggler { width: 500px; height: 200px; }
         #button { padding: .5em 1em; text-decoration: none; }
         #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
         #effect h3 { margin: 0; padding: 0.4em; text-align: center; }
      </style>
      
      <script>
         $(function() {
            function runEffect() {
               $( "#effect" ).toggle('explode', 300);
            };
            $( "#button" ).click(function() {
               runEffect();
               return false;
            });
         });
      </script>
   </head>
   
   <body>
      <div class = "toggler">
         <div id = "effect" class = "ui-widget-content ui-corner-all">
            <h3 class = "ui-widget-header ui-corner-all">Toggle</h3>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
            </p>
         </div>
      </div>
      <a href = "#" id = "button" class = "ui-state-default ui-corner-all">Toggle</a>
   </body>
</html>

Sauvegardons le code ci-dessus dans un fichier HTML toggleexample.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 vérifier comment les classes sont affichées et masquées.