JqueryUI - Toggle - CoderLessons.com

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

Синтаксис

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

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

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

эффект

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

опции

Это тип объекта и указывает специфичные для эффекта настройки и ослабление . Кроме того, каждый эффект имеет свой собственный набор опций, которые можно указать общие для нескольких эффектов, описанных в таблице jQueryUI Effects .

продолжительность

Он имеет тип Number или String и определяет продолжительность анимации. Его значение по умолчанию составляет 400 .

полный

Это метод обратного вызова, вызываемый для каждого элемента, когда эффект завершен для этого элемента.

jQueryUI Эффекты

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

Sr.No.	Эффект и описание
1	слепой Показывает или скрывает элемент в виде жалюзи: перемещая нижний край вниз или вверх или правый край вправо или влево, в зависимости от указанного направления и режима .
2	подпрыгивать Заставляет элемент появляться, чтобы отскочить в вертикальном или горизонтальном направлении, опционально показывая или скрывая элемент.
3	клип Показывает или скрывает элемент, перемещая противоположные границы элемента вместе, пока они не встретятся в середине или наоборот.
4	падение Показывает или скрывает элемент, создавая видимость его перетаскивания на страницу.
5	взрываться Показывает или скрывает элемент, разбивая его на несколько частей, которые перемещаются в радиальных направлениях, как будто они взрываются или взрываются со страницы.
6	увядать Показывает или скрывает элемент, регулируя его непрозрачность. Это то же самое, что и основные эффекты затухания, но без параметров.
7	складка Показывает или скрывает элемент, корректируя противоположные границы внутри или снаружи, а затем делая то же самое для другого набора границ.
8	основной момент Привлекает внимание к элементу путем кратковременного изменения его цвета фона при отображении или скрытии элемента.
9	пыхтеть Расширяет или сжимает элемент на месте, изменяя его непрозрачность.
10	пульсировать Настраивает и отключает непрозрачность элемента перед тем, как элемент будет показан или скрыт, как указано.
11	масштаб Расширяет или сужает элемент на указанный процент.
12	встряхивать Встряхивает элемент вперед и назад, вертикально или горизонтально.
13	размер Изменяет размеры элемента до указанной ширины и высоты. Аналогично масштабу, за исключением того, как указан целевой размер.
14	горка Перемещает элемент таким образом, чтобы он скользил по странице или из нее.
15	перечислить Анимирует переходный элемент структуры, который заставляет элемент казаться для передачи другому элементу. Внешний вид элемента структуры должен быть определен с помощью правил CSS для класса ui-Effects-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, вы также должны увидеть следующий вывод. Теперь вы можете играть с результатом —

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

JqueryUI — Toggle

Синтаксис

jQueryUI Эффекты

пример

Популярные уроки и статьи

Инициализаторы экземпляра в Java объяснены

AJAX - Краткое руководство

TempDB для производительности