JqueryUI - Afficher

Ce chapitre abordera les show()méthode, qui est l'une des méthodes utilisées pour gérer les effets visuels jQueryUI. show () méthode affiche un élément en utilisant l'effet indiqué.

show () change la visibilité des éléments enveloppés à l'aide de l'effet spécifié.

Syntaxe

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

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

N ° Sr.	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 . De plus, 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 () -

N ° Sr.	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 la direction verticale ou horizontale, 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 parties qui se déplacent dans des directions radiales comme si elles implosaient ou explosaient depuis 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 changeant 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 façon 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 les règles CSS pour la classe ui-effects-transfer, ou la classe spécifiée en option.

Exemples

L'exemple suivant illustre l'utilisation de la méthode show () .

Afficher avec effet de secousse

Les exemples suivants illustrent la méthode show () avec effet de secousse .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI show 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() {
            // run the currently selected effect
            function runEffect() {
               // run the effect
               $( "#effect" ).show( "shake", {times: 10,distance: 100}, 1000, callback);
            };
            
            //callback function to bring a hidden box back
            function callback() {
               setTimeout(function() {
                  $( "#effect:visible" ).removeAttr( "style" ).fadeOut();
               }, 1000 );
            };
            $( "#button" ).click(function() {
               runEffect();
               return false;
            });
            $( "#effect" ).hide();
         });
      </script>
   </head>
   
   <body>
      <div class = "toggler">
         <div id = "effect" class = "ui-widget-content ui-corner-all">
            <h3 class = "ui-widget-header ui-corner-all">Show</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">Run Effect</a>
   </body>
</html>

Sauvegardons le code ci-dessus dans un fichier HTML showexample.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.

Afficher avec effet aveugle

L'exemple suivant illustre l'utilisation de la méthode show () avec effet aveugle .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI show 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() {
            // run the currently selected effect
            function runEffect() {
               // run the effect
               $( "#effect" ).show( "blind", {times: 10,distance: 100}, 1000, callback);
            };
            
            //callback function to bring a hidden box back
            function callback() {
               setTimeout(function() {
                  $( "#effect:visible" ).removeAttr( "style" ).fadeOut();
               }, 1000 );
            };
            
            // set effect from select menu value
            $( "#button" ).click(function() {
               runEffect();
               return false;
            });
            $( "#effect" ).hide();
         });
      </script>
   </head>
   
   <body>
      <div class = "toggler">
         <div id = "effect" class = "ui-widget-content ui-corner-all">
            <h3 class = "ui-widget-header ui-corner-all">Show</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">Run Effect</a>
   </body>
</html>