JqueryUI - Mostrar

Este capítulo discutirá el show()método, que es uno de los métodos utilizados para administrar los efectos visuales de jQueryUI. El método show () muestra un elemento con el efecto indicado.

El método show () alterna la visibilidad de los elementos envueltos usando el efecto especificado.

Sintaxis

los show() El método tiene la siguiente sintaxis:

.show( effect [, options ] [, duration ] [, complete ] )
No Señor. Descripción de parámetros
1

effect

Esta es una Cadena que indica qué efecto usar para la transición. Esta es una Cadena y representa el efecto a usar al ajustar la visibilidad del elemento. Los efectos se enumeran en la tabla siguiente.

2

options

Es de tipo Objeto e indica ajustes y suavizado específicos del efecto . Además, cada efecto tiene su propio conjunto de opciones que se pueden especificar en común en varios efectos descritos en la tabla Efectos de jQueryUI .

3

duration

Es de tipo Número o Cadena y determina cuánto tiempo se ejecutará la animación. Su valor predeterminado es 400 .

4

complete

Este es un método de devolución de llamada llamado para cada elemento cuando el efecto está completo para este elemento.

Efectos de jQueryUI

La siguiente tabla describe los diversos efectos que se pueden utilizar con el método effects ():

No Señor. Efecto y descripción
1

blind

Muestra u oculta el elemento a la manera de una persiana: moviendo el borde inferior hacia abajo o hacia arriba, o el borde derecho hacia la derecha o hacia la izquierda, según la dirección y el modo especificados .

2

bounce

Hace que el elemento parezca rebotar en la dirección vertical u horizontal, mostrando u ocultando opcionalmente el elemento.

3

clip

Muestra u oculta el elemento moviendo los bordes opuestos del elemento juntos hasta que se encuentran en el medio, o viceversa.

4

drop

Muestra u oculta el elemento haciendo que parezca que cae o sale de la página.

5

explode

Muestra u oculta el elemento dividiéndolo en varias partes que se mueven en direcciones radiales como si implosionara o explotara desde la página.

6

fade

Muestra u oculta el elemento ajustando su opacidad. Es lo mismo que los efectos de atenuación principales, pero sin opciones.

7

fold

Muestra u oculta el elemento ajustando los bordes opuestos hacia adentro o hacia afuera, y luego haciendo lo mismo con el otro conjunto de bordes.

8

highlight

Llama la atención sobre el elemento cambiando momentáneamente su color de fondo mientras muestra u oculta el elemento.

9

puff

Expande o contrae el elemento en su lugar mientras ajusta su opacidad.

10

pulsate

Ajusta la opacidad del elemento dentro y fuera antes de asegurarse de que el elemento se muestra u oculta según lo especificado.

11

scale

Expande o contrae el elemento en un porcentaje específico.

12

shake

Sacude el elemento hacia adelante y hacia atrás, ya sea vertical u horizontalmente.

13

size

Cambia el tamaño del elemento a un ancho y alto específicos. Similar a la escala, excepto por cómo se especifica el tamaño del objetivo.

14

slide

Mueve el elemento de manera que parezca deslizarse dentro o fuera de la página.

15

transfer

Anima un elemento de contorno transitorio que hace que el elemento parezca transferirse a otro elemento. La apariencia del elemento de esquema debe definirse mediante reglas CSS para la clase ui-effects-transfer, o la clase especificada como una opción.

Ejemplos

El siguiente ejemplo demuestra el uso del método show () .

Mostrar con efecto de agitación

Los siguientes ejemplos demuestran el método show () con efecto de agitación .

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

Guardemos el código anterior en un archivo HTML showexample.htmy ábralo en un navegador estándar que admita javascript, también debe ver el siguiente resultado. Ahora puedes jugar con el resultado:

Haga clic en los botones Agregar clase y Eliminar clase para ver el efecto de las clases en el cuadro.

Mostrar con efecto ciego

El siguiente ejemplo demuestra el uso del método show () con efecto ciego .

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

Guardemos el código anterior en un archivo HTML showexample.htmy ábralo en un navegador estándar que admita javascript, también debe ver el siguiente resultado. Ahora puedes jugar con el resultado: