Управление классами стилей

Модуль Effects Core предоставляет также возможность плавно и последовательно изменять значения атрибутов стилевого класса путем указания названия класса и продолжительности операции. Эта возможность отличает методы модуля Effects Core от стандартных методов библиотеки jQuery, где стилевой класс применяется сразу. Для управления классами стилей предназначены следующие методы.

  • addClass() — добавляет указанный класс всем элементам коллекции. Формат метода:
addClass(<Название класса>[, <Продолжительность>[,
         <Функция обратного вызова>]])
  • removeClass() — удаляет указанный класс у всех элементов коллекции. Формат метода:
removeClass([<Название класса>[, <Продолжительность>[,
             <Функция обратного вызова>]]])
  • toggleClass() — добавляет указанный класс всем элементам коллекции, если он не был определен ранее, или удаляет указанный класс, если он был добавлен ранее. Формат метода:
toggleClass(<Название класса>[, <Продолжительность>])
  • switchClass() — удаляет один класс и добавляет другой. Формат метода:
switchClass(<Удаляемый класс>, <Новый класс>[,
            <Продолжительность>])

В необязательном параметре <Продолжительность> может быть указано время выполнения операции в миллисекундах или следующие значения:

  • fast — 200 миллисекунд;
  • normal — 400 миллисекунд;
  • slow — 600 миллисекунд.

В параметре <Функция обратного вызова> может быть указана ссылка на функцию, которая будет вызвана после окончания операции. Формат функции:

function <Название функции>() {
   // ...
}

Рассмотрим управление классами стилей на примере (листинг 12.32).

Листинг 12.32. Модуль UI Effects, управление классами стилей

<!doctype html>
<html>
<head>
<title>Модуль UI Effects, управление классами стилей</title>
<meta charset="utf-8">
<script src="js/jquery.js"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"></script>
<style>
body { font-size:10pt; font-family:Verdana, sans-serif; }
#div1 {
   position:absolute; top:50px; left:50px;
   width:100px; height:100px;
   padding:2px; border:1px solid #000000; text-align:center;
}
.cls1 { background-color:#000000; color:#ffffff; }
.cls2 { background-color:#FF0000; color:#008800; }
</style>
<script>
$(document).ready(function() {
   $("#btn1").click(function() { // Добавить класс
      var elem = $("#div1");
      if (!elem.is(".cls1") && !elem.is(".cls2"))
         elem.addClass("cls1", 1000);
   });
   $("#btn2").click(function() { // Удалить класс
      var elem = $("#div1");
      if (elem.is(".cls1")) elem.removeClass("cls1", 1000);
      else if (elem.is(".cls2")) elem.removeClass("cls2", 1000);
   });
   $("#btn3").click(function() { // Переключить
      var elem = $("#div1");
      if (elem.is(".cls2")) elem.removeClass("cls2", 1000);
      else elem.toggleClass("cls1", 1000);
   });
   $("#btn4").click(function() { // Заменить класс
      var elem = $("#div1");
      if (elem.is(".cls1")) elem.switchClass("cls1", "cls2", 1000);
      else if (elem.is(".cls2")) 
               elem.switchClass("cls2", "cls1", 1000);
      else elem.addClass("cls2", 1000);
   });
});
</script>
</head>
<body>
<input type="button" value="Добавить класс" id="btn1">
<input type="button" value="Удалить класс" id="btn2">
<input type="button" value="Переключить" id="btn3">
<input type="button" value="Заменить класс" id="btn4"><br><br>
<div id="div1">Управление классами стилей</div>
</body>
</html>

После щелчка на кнопке Добавить класс вначале плавно изменится цвет фона с белого на черный, а затем поменяется цвет текста с черного на белый. После щелчка на кнопке Удалить класс также плавно будет удален стилевой класс, который был добавлен ранее. Переключение и замена классов производится с помощью кнопок Переключить и Заменить класс соответственно.

Самоучитель по jQuery
Самоучитель по jQuery Учебник по jQuery 3.5.1 и AJAX в формате PDF

Помощь сайту

Yandex-деньги: 410011140483022

ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов

Поиск по сайту в Яндексе