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

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

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

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

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

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>

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

Предыдущая статья Все статьи Следующая статья