Учебники

JqueryUI — Toggle Class

Январь 2, 2019

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

Синтаксис

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

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

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

имя класса

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

2

переключатель

Он имеет тип Boolean и, если он указан, заставляет метод toggleClass () добавить класс, если он равен true , или удалить класс, если он равен false .

3

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

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

4

ослабление

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

5

полный

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

имя класса

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

переключатель

Он имеет тип Boolean и, если он указан, заставляет метод toggleClass () добавить класс, если он равен true , или удалить класс, если он равен false .

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

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

ослабление

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

полный

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

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

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

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

имя класса

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

2

переключатель

Он имеет тип Boolean и, если он указан, заставляет метод toggleClass () добавить класс, если он равен true , или удалить класс, если он равен false .

3

опции

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

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

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

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

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

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

имя класса

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

переключатель

Он имеет тип Boolean и, если он указан, заставляет метод toggleClass () добавить класс, если он равен true , или удалить класс, если он равен false .

опции

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

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

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

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

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

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

Примеры

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

<!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>
         .class1 {
            border-width : 10px;
            border-color : grey;
            background-color : #cedc98;
            color : black;
         }
      </style>
      
      <script>
         function toggle () {
            $("#para").toggleClass ("class1", 1000);
         }
      </script>
   </head>
   
   <body>
      <button onclick = toggle()> Toggle </button>
      <p id = "para" style = border-style:solid> Welcome to Tutorials Point </p>
   </body>
</html>

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

Нажмите на кнопку Toggle , чтобы увидеть, как CSS-классы изменяются для текста.

49
Share: