JqueryUI - Mostra

Questo capitolo discuterà di show()metodo, che è uno dei metodi utilizzati per gestire gli effetti visivi di jQueryUI. Il metodo show () visualizza un elemento utilizzando l'effetto indicato.

Il metodo show () alterna la visibilità degli elementi avvolti usando l'effetto specificato.

Sintassi

Il show() metodo ha la seguente sintassi:

.show( effect [, options ] [, duration ] [, complete ] )
Sr.No. Parametro e descrizione
1

effect

Questa è una stringa che indica quale effetto usare per la transizione. Questa è una stringa e rappresenta l'effetto da usare quando si regola la visibilità dell'elemento. Gli effetti sono elencati nella tabella seguente.
2

options

È di tipo Object e indica impostazioni e andamento specifici dell'effetto . Inoltre, ogni effetto ha il proprio set di opzioni che possono essere specificate comuni a più effetti descritti nella tabella Effetti jQueryUI .
3

duration

È di tipo Numero o Stringa e determina la durata dell'animazione. Il suo valore predefinito è 400 .
4

complete

Questo è un metodo di callback chiamato per ogni elemento quando l'effetto è completo per questo elemento.

Effetti jQueryUI

La tabella seguente descrive i vari effetti che possono essere utilizzati con il metodo effects () -

Sr.No. Effetto e descrizione
1

blind

Mostra o nasconde l'elemento come una tenda da finestra: spostando il bordo inferiore verso il basso o verso l'alto o il bordo destro verso destra o verso sinistra, a seconda della direzione e della modalità specificate .
2

bounce

Fa sì che l'elemento sembri rimbalzare in direzione verticale o orizzontale, mostrando o nascondendo eventualmente l'elemento.
3

clip

Mostra o nasconde l'elemento spostando i bordi opposti dell'elemento insieme fino a quando non si incontrano al centro o viceversa.
4

drop

Mostra o nasconde l'elemento facendolo sembrare cadere o cadere dalla pagina.
5

explode

Mostra o nasconde l'elemento suddividendolo in più parti che si muovono in direzioni radiali come se implodessero o esplodessero dalla pagina.
6

fade

Mostra o nasconde l'elemento regolandone l'opacità. È lo stesso degli effetti di dissolvenza principali, ma senza opzioni.
7

fold

Mostra o nasconde l'elemento regolando i bordi opposti dentro o fuori, quindi facendo lo stesso per l'altro insieme di bordi.
8

highlight

Richiama l'attenzione sull'elemento modificando momentaneamente il colore di sfondo mentre mostra o nasconde l'elemento.
9

puff

Espande o contrae l'elemento in posizione regolandone l'opacità.
10

pulsate

Attiva e disattiva l'opacità dell'elemento prima di assicurarsi che l'elemento venga mostrato o nascosto come specificato.
11

scale

Espande o contrae l'elemento di una percentuale specificata.
12

shake

Scuote l'elemento avanti e indietro, verticalmente o orizzontalmente.
13

size

Ridimensiona l'elemento a una larghezza e altezza specificate. Simile alla scala tranne per il modo in cui viene specificata la dimensione di destinazione.
14

slide

Sposta l'elemento in modo tale che sembri scorrere dentro o fuori dalla pagina.
15

transfer

Anima un elemento di contorno transitorio che fa sembrare che l'elemento venga trasferito a un altro elemento. L'aspetto dell'elemento outline deve essere definito tramite le regole CSS per la classe ui-effects-transfer o la classe specificata come opzione.

Esempi

L'esempio seguente mostra l'uso del metodo show () .

Spettacolo con effetto shake

I seguenti esempi dimostrano il metodo show () con effetto shake .

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

Salviamo il codice sopra in un file HTML showexample.htme aprilo in un browser standard che supporta javascript, devi anche vedere il seguente output. Ora puoi giocare con il risultato:

Fare clic sui pulsanti Aggiungi classe e Rimuovi classe per vedere l'effetto delle classi sulla scatola.

Spettacolo con effetto cieco

L'esempio seguente mostra l'uso del metodo show () con effetto cieco .

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

Salviamo il codice sopra in un file HTML showexample.htme aprilo in un browser standard che supporta javascript, devi anche vedere il seguente output. Ora puoi giocare con il risultato: