JqueryUI - Переключить

В этой главе мы обсудим toggle()метод визуальных эффектов jQueryUI. Метод toggle () переключает методы show () или hide () в зависимости от того, скрыт элемент или нет.

Синтаксис

В toggle() метод имеет следующий синтаксис -

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

Sr.No.	Параметр и описание
1	effect Это строка, указывающая, какой эффект использовать для перехода. Это строка, представляющая эффект, который следует использовать при настройке видимости элемента. Эффекты перечислены в таблице ниже.
2	options Он относится к типу Object и указывает параметры и динамику, зависящие от эффекта . Кроме того, каждый эффект имеет свой собственный набор параметров, которые можно указать для нескольких эффектов, описанных в таблице jQueryUI Effects .
3	duration Он имеет тип Number или String и определяет, как долго будет выполняться анимация. Его значение по умолчанию - 400 .
4	complete Это метод обратного вызова, вызываемый для каждого элемента, когда эффект для этого элемента завершен.

jQueryUI эффекты

В следующей таблице описаны различные эффекты, которые можно использовать с методом effects ().

Sr.No.	Эффект и описание
1	blind Отображает или скрывает элемент как оконную шторку: перемещая нижний край вниз или вверх или правый край вправо или влево, в зависимости от указанного направления и режима .
2	bounce Заставляет элемент отскакивать в вертикальном или горизонтальном направлении, при необходимости показывая или скрывая элемент.
3	clip Показывает или скрывает элемент, перемещая противоположные границы элемента вместе, пока они не встретятся посередине, или наоборот.
4	drop Отображает или скрывает элемент, заставляя его опускаться на страницу или выпадать с нее.
5	explode Отображает или скрывает элемент, разделяя его на несколько частей, которые перемещаются в радиальном направлении, как если бы они врезались в страницу или взрывались из нее.
6	fade Показывает или скрывает элемент, регулируя его непрозрачность. Это то же самое, что и основные эффекты затухания, но без опций.
7	fold Показывает или скрывает элемент, изменяя противоположные границы внутри или снаружи, а затем делая то же самое для другого набора границ.
8	highlight Привлекает внимание к элементу, на мгновение меняя цвет фона при отображении или скрытии элемента.
9	puff Расширяет или сжимает элемент на месте, регулируя его непрозрачность.
10	pulsate Регулирует непрозрачность элемента, включая и выключая, прежде чем убедиться, что элемент отображается или скрыт, как указано.
11	scale Расширяет или сжимает элемент на указанный процент.
12	shake Встряхивает элемент вперед и назад, вертикально или горизонтально.
13	size Изменяет размер элемента до указанной ширины и высоты. Похож на масштаб, за исключением того, как указан целевой размер.
14	slide Перемещает элемент таким образом, что кажется, что он скользит на страницу или с нее.
15	transfer Анимирует переходный элемент контура, который создает впечатление, что элемент переносится на другой элемент. Внешний вид элемента схемы должен быть определен с помощью правил CSS для класса ui-effects-transfer или класса, указанного в качестве опции.

пример

В следующем примере демонстрируется использование метода toggle () с различными эффектами, перечисленными в приведенной выше таблице.

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

Сохраним приведенный выше код в HTML-файл. toggleexample.htmи откройте его в стандартном браузере, поддерживающем javascript, вы также должны увидеть следующий вывод. Теперь вы можете поиграть с результатом -

Нажмите кнопку «Переключить», чтобы проверить, как классы отображаются и скрываются.