JqueryUI - Показать - CoderLessons.com

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

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

Синтаксис

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

.show( 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 или класса, указанного в качестве опции.

Примеры

В следующем примере демонстрируется использование метода show () .

Показать с эффектом встряхивания

В следующих примерах демонстрируется метод show () с эффектом встряхивания .

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

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

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

Шоу с эффектом слепоты

В следующем примере демонстрируется использование метода show () со слепым эффектом.

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

JqueryUI — Показать

Синтаксис

jQueryUI Эффекты

Примеры

Показать с эффектом встряхивания

Шоу с эффектом слепоты

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

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

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

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