JqueryUI - Добавить класс

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

addClass () добавляет указанные классы к согласованным элементам при анимации всех изменений стиля.

Синтаксис

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

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

.addClass( className [, duration ] [, easing ] [, complete ] )

Sr. No.	Параметр и описание
1	className Это строка, содержащая один или несколько классов CSS (разделенных пробелами).
2	duration Имеет тип Number или String и указывает количество миллисекунд эффекта. Значение 0 принимает элемент непосредственно в новом стиле, без прогресса. Его значение по умолчанию - 400 .
3	easing Это тип String, и он указывает способ продвижения эффекта. Его значение по умолчанию - swing . Возможные значения здесь .
4	complete Это метод обратного вызова, вызываемый для каждого элемента, когда эффект для этого элемента завершается.

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

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

.addClass( className [, options ] )

Sr. No.	Параметр и описание
1	className Это строка, содержащая один или несколько классов CSS (разделенных пробелами).
2	options Здесь представлены все настройки анимации. Все свойства необязательны. Возможные значения - duration- Это тип Number или String и указывает количество миллисекунд эффекта. Значение 0 принимает элемент непосредственно в новом стиле, без прогресса. Его значение по умолчанию - 400 . easing- Это тип String, и он указывает способ развития эффекта. Его значение по умолчанию - swing . Возможные значения здесь . complete - Это метод обратного вызова, вызываемый для каждого элемента, когда эффект для этого элемента завершен. children- Это тип Boolean и указывает, должна ли анимация дополнительно применяться ко всем потомкам совпадающих элементов. Его значение по умолчанию - false . queue- имеет тип Boolean или String и указывает, помещать ли анимацию в очередь эффектов. Его значение по умолчанию - истина .

Примеры

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

Прохождение одиночного класса

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI addClass 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>
      
      <style>
         .elemClass {
            width: 200px;
            height: 50px;
            background-color: #b9cd6d;
         }
         .myClass {
            font-size: 40px; background-color: #ccc; color: white;
         }
      </style>
      
      <script type = "text/javascript">
         $(document).ready(function() {
            $('.button').click(function() {
               if (this.id == "add") {
                  $('#animTarget').addClass("myClass", "fast")
               } else {
               $('#animTarget').removeClass("myClass", "fast")
               }
            })
         });
      </script>
   </head>
   
   <body>
      <div id = animTarget class = "elemClass">
         Hello!
      </div>
      <button class = "button" id = "add">Add Class</button>
      <button class = "button" id = "remove">Remove Class</button>
   </body>
</html>

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

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

Прохождение нескольких классов

В этом примере показано, как передать несколько классов методу addClass .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI addClass 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>
         .red { color: red; }
         .big { font-size: 5em; }
         .spaced { padding: 1em; }
      </style>
      
      <script>
         $(document).ready(function() {
            $('.button-1').click(function() {
               $( "#welcome" ).addClass( "red big spaced", 3000 );
            });
         });
      </script>
   </head>
   
   <body>
      <p id = "welcome">Welcome to Tutorials Point!</p>
      <button class = "button-1">Click me</button>
   </body>
</html>