Учебники

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

Январь 2, 2019

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

Метод addClass () добавляет указанные классы к соответствующим элементам, одновременно анимируя все изменения стиля.

Синтаксис

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

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

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

имя класса

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

2

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

Он имеет тип Number или String и указывает количество миллисекунд эффекта. Значение 0 принимает элемент непосредственно в новом стиле, без прогресса. Его значение по умолчанию составляет 400 .

3

ослабление

Это тип String и указывает путь к прогрессу в эффекте. По умолчанию используется значение swing . Возможные значения здесь .

4

полный

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

имя класса

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

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

Он имеет тип Number или String и указывает количество миллисекунд эффекта. Значение 0 принимает элемент непосредственно в новом стиле, без прогресса. Его значение по умолчанию составляет 400 .

ослабление

Это тип String и указывает путь к прогрессу в эффекте. По умолчанию используется значение swing . Возможные значения здесь .

полный

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

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

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

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

имя класса

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

2

опции

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

  • длительность — это тип Number или String, указывающий количество миллисекунд эффекта. Значение 0 принимает элемент непосредственно в новом стиле, без прогресса. Его значение по умолчанию составляет 400 .

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

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

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

  • queue — имеет тип Boolean или String и представляет, помещать ли анимацию в очередь эффектов. Значение по умолчанию — true .

имя класса

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

опции

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

длительность — это тип Number или String, указывающий количество миллисекунд эффекта. Значение 0 принимает элемент непосредственно в новом стиле, без прогресса. Его значение по умолчанию составляет 400 .

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

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

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

queue — имеет тип Boolean или String и представляет, помещать ли анимацию в очередь эффектов. Значение по умолчанию — true .

Примеры

В следующем примере демонстрируется использование методов 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>

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

46
Share: