JqueryUI - класс переключения

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

Синтаксис

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

В switchClass() метод имеет свой основной синтаксис следующим образом -

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

removeClassName

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

2

addClassName

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

3

duration

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

4

easing

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

5

complete

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

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

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

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

removeClassName

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

2

addClassName

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

3

options

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

  • duration- Строка или число, определяющее, как долго будет работать анимация. Значение по умолчанию - 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, вы также должны увидеть следующий вывод. Теперь вы можете поиграть с результатом -

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