Этот сайт использует cookies. Продолжение работы с сайтом означает, что Вы согласны!
Управление классами стилей
Модуль 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>После щелчка на кнопке Добавить класс вначале плавно изменится цвет фона с белого на черный, а затем поменяется цвет текста с черного на белый. После щелчка на кнопке Удалить класс также плавно будет удален стилевой класс, который был добавлен ранее. Переключение и замена классов производится с помощью кнопок Переключить и Заменить класс соответственно.
Помощь сайту
Yandex-деньги: 410011140483022
ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов