Учебники

JqueryUI — класс переключателей

Январь 2, 2019

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

Синтаксис

Добавлено в версии 1.0 jQueryUI

Метод switchClass () имеет основной синтаксис: 

.switchClass( removeClassName, addClassName [, duration ] [, easing ] [, complete ] )
Sr.No. Параметр и описание
1

removeClassName

Это строка и представляет имя класса CSS или список имен классов, разделенных пробелами, которые необходимо удалить.

2

addClassName

Он имеет тип String и представляет одно или несколько имен классов (разделенных пробелами) для добавления к атрибуту класса каждого соответствующего элемента.

3

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

Он имеет тип Number или String и, необязательно, предоставляет один из следующих: медленный, нормальный, быстрый или длительность эффекта в миллисекундах. Если опущен, метод animate () определяет значение по умолчанию. Его значение по умолчанию составляет 400 .

4

ослабление

Имя функции замедления, передаваемой методу animate ().

5

полный

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

removeClassName

Это строка и представляет имя класса CSS или список имен классов, разделенных пробелами, которые необходимо удалить.

addClassName

Он имеет тип String и представляет одно или несколько имен классов (разделенных пробелами) для добавления к атрибуту класса каждого соответствующего элемента.

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

Он имеет тип Number или String и, необязательно, предоставляет один из следующих: медленный, нормальный, быстрый или длительность эффекта в миллисекундах. Если опущен, метод animate () определяет значение по умолчанию. Его значение по умолчанию составляет 400 .

ослабление

Имя функции замедления, передаваемой методу animate ().

полный

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

Добавлено в версии 1.9 jQueryUI

В версии 1.9 этот метод теперь поддерживает дочернюю опцию, которая также будет анимировать элементы-потомки. 

.switchClass( removeClassName, addClassName [, options ] )
Sr.No. Параметр и описание
1

removeClassName

Это строка и представляет имя класса CSS или список имен классов, разделенных пробелами, которые необходимо удалить.

2

addClassName

Он имеет тип String и представляет одно или несколько имен классов (разделенных пробелами) для добавления к атрибуту класса каждого соответствующего элемента.

3

опции

Это представляет все настройки анимации. Все свойства не являются обязательными. Возможные значения —

  • длительность — строка или число, определяющее, как долго будет выполняться анимация. Значение по умолчанию — 400 .

  • easing — строка, указывающая, какую функцию замедления использовать для перехода. По умолчанию используется значение swing . Возможные значения здесь .

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

  • children — это логическое значение, представляющее, должна ли анимация дополнительно применяться ко всем потомкам соответствующих элементов.

  • queue — имеет тип String / Boolean, указывающий, помещать ли анимацию в очередь эффектов.

removeClassName

Это строка и представляет имя класса CSS или список имен классов, разделенных пробелами, которые необходимо удалить.

addClassName

Он имеет тип String и представляет одно или несколько имен классов (разделенных пробелами) для добавления к атрибуту класса каждого соответствующего элемента.

опции

Это представляет все настройки анимации. Все свойства не являются обязательными. Возможные значения —

длительность — строка или число, определяющее, как долго будет выполняться анимация. Значение по умолчанию — 400 .

easing — строка, указывающая, какую функцию замедления использовать для перехода. По умолчанию используется значение swing . Возможные значения здесь .

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

children — это логическое значение, представляющее, должна ли анимация дополнительно применяться ко всем потомкам соответствующих элементов.

queue — имеет тип String / Boolean, указывающий, помещать ли анимацию в очередь эффектов.

Примеры

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

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Switch Class 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>
         .LargeClass {
            font-family: Arial;
            font-size: large;
            font-weight: bold;
            color: Red;
         }
         .NormalClass {
            font-family: Arial;
            font-size: small;
            font-weight: bold;
            color: Blue;
         }
      </style>
      
      <script>
         $(function() {
            $('#btnSwitch').click(function() {
               $(".NormalClass").switchClass("NormalClass","LargeClass",'fast');
               $(".LargeClass").switchClass("LargeClass","NormalClass",'fast');
               return false;
            });
         });
      </script>
   </head>
   
   <body>
      <div class = "NormalClass">
         Tutorials Point Rocks!!!
      </div>
      <div class = "NormalClass">
         Welcome to Tutorials Point!!!
      </div>
      <br />
      <input type = "button" id = "btnSwitch" value = "Switch Class" />
   </body>
</html>

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

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

42
Share: