JqueryUI - Pokaż

W tym rozdziale omówimy show()metoda, która jest jedną z metod zarządzania efektami wizualnymi jQueryUI. show () wyświetla element przy użyciu wskazanego efektu.

show () przełącza widoczność opakowanych elementów przy użyciu określonego efektu.

Składnia

Plik show() metoda ma następującą składnię -

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

Sr.No.	Parametr i opis
1	effect To jest String wskazujący efekt, który ma być użyty do przejścia. To jest String i reprezentuje efekt do użycia podczas dostosowywania widoczności elementu. Efekty przedstawiono w poniższej tabeli.
2	options Jest to typ Object i wskazuje ustawienia i wygładzanie specyficzne dla efektu . Ponadto każdy efekt ma własny zestaw opcji, które można określić jako wspólne dla wielu efektów opisanych w tabeli Efekty jQueryUI .
3	duration Jest to typ Number lub String i określa, jak długo będzie trwała animacja. Jego domyślna wartość to 400 .
4	complete Jest to metoda wywołania zwrotnego wywoływana dla każdego elementu, gdy efekt jest kompletny dla tego elementu.

Efekty jQueryUI

W poniższej tabeli opisano różne efekty, których można używać z metodą effects () -

Sr.No.	Efekt i opis
1	blind Pokazuje lub ukrywa element na wzór rolety okiennej: przesuwając dolną krawędź w dół lub w górę lub prawą krawędź w prawo lub w lewo, w zależności od określonego kierunku i trybu .
2	bounce Powoduje, że element wydaje się odbijać w kierunku pionowym lub poziomym, opcjonalnie pokazując lub ukrywając element.
3	clip Pokazuje lub ukrywa element, przesuwając przeciwległe krawędzie elementu razem, aż spotkają się w środku lub odwrotnie.
4	drop Pokazuje lub ukrywa element, sprawiając, że wygląda na to, że spada na stronę lub spada ze strony.
5	explode Pokazuje lub ukrywa element, dzieląc go na wiele części poruszających się w kierunkach promieniowych, tak jakby implodował na stronę lub eksplodował z niej.
6	fade Pokazuje lub ukrywa element, dostosowując jego krycie. To jest to samo, co podstawowe efekty zanikania, ale bez opcji.
7	fold Pokazuje lub ukrywa element, dopasowując przeciwległe krawędzie do wewnątrz lub na zewnątrz, a następnie robiąc to samo dla drugiego zestawu granic.
8	highlight Zwraca uwagę na element, chwilowo zmieniając kolor tła podczas pokazywania lub ukrywania elementu.
9	puff Rozwija lub kurczy element w miejscu, dostosowując jego krycie.
10	pulsate Dostosowuje krycie elementu, aby włączyć i wyłączyć przed upewnieniem się, że element jest wyświetlany lub ukrywany zgodnie z ustaleniami.
11	scale Zwiększa lub zmniejsza element o określony procent.
12	shake Potrząsa elementem w przód iw tył, w pionie lub w poziomie.
13	size Zmienia rozmiar elementu do określonej szerokości i wysokości. Podobny do skali, z wyjątkiem sposobu określenia rozmiaru docelowego.
14	slide Przenosi element tak, że wydaje się, że przesuwa się on na stronę lub poza nią.
15	transfer Animuje przejściowy element konturu, który sprawia, że element wydaje się przenoszony do innego elementu. Wygląd elementu konturu należy zdefiniować za pomocą reguł CSS dla klasy ui-effects-transfer lub klasy określonej jako opcja.

Przykłady

Poniższy przykład demonstruje użycie metody show () .

Pokaż z efektem potrząśnięcia

Poniższe przykłady demonstrują metodę show () z efektem potrząśnięcia .

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

Zapiszmy powyższy kod w pliku HTML showexample.htmi otwórz go w standardowej przeglądarce obsługującej javascript, musisz również zobaczyć następujące dane wyjściowe. Teraz możesz grać z wynikiem -

Kliknij przyciski Dodaj klasę i Usuń klasę, aby zobaczyć efekt zajęć na polu.

Pokaż z efektem ślepoty

Poniższy przykład demonstruje użycie metody show () z efektem ślepym .

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