JqueryUI - Przełącz

W tym rozdziale omówimy toggle()metoda efektów wizualnych jQueryUI. Metoda toggle () przełącza metody show () lub hide () w zależności od tego, czy element jest ukryty, czy nie.

Składnia

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

.toggle( 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ład

Poniższy przykład demonstruje użycie metody toggle () z innym skutkiem wymienionym w powyższej tabeli.

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

Zapiszmy powyższy kod w pliku HTML toggleexample.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 przycisk Przełącz, aby sprawdzić, jak zajęcia są wyświetlane i ukrywane.