JqueryUI - класс переключения
В этой главе мы обсудим switchClass()метод, который является полезным новым классом для манипуляций. Метод switchClass () перемещает из одного CSS одного класса CSS в другой, анимируя переход из одного состояния в другое.
Синтаксис
Добавлено в версии 1.0 jQueryUI
В switchClass() метод имеет свой основной синтаксис следующим образом -
.switchClass( removeClassName, addClassName [, duration ] [, easing ] [, complete ] )| Sr.No. | Параметр и описание |
|---|---|
| 1 | removeClassName Это строка, представляющая имя класса CSS или список имен классов, разделенных пробелами, которые необходимо удалить. |
| 2 | addClassName Он имеет тип String и представляет одно или несколько имен классов (разделенных пробелом), которые должны быть добавлены к атрибуту класса каждого совпадающего элемента. |
| 3 | duration Это тип Number или String и может содержать одно из значений: медленный, нормальный, быстрый или продолжительность эффекта в миллисекундах. Если опущено, метод animate () определяет значение по умолчанию. Его значение по умолчанию - 400 . |
| 4 | easing Имя функции замедления, передаваемой методу animate (). |
| 5 | complete Это метод обратного вызова, вызываемый для каждого элемента, когда эффект для этого элемента завершен. |
Добавлено в версии 1.9 jQueryUI
В версии 1.9 этот метод теперь поддерживает параметр дочерних элементов, который также будет анимировать дочерние элементы.
.switchClass( removeClassName, addClassName [, options ] )| Sr.No. | Параметр и описание |
|---|---|
| 1 | removeClassName Это строка, представляющая имя класса CSS или список имен классов, разделенных пробелами, которые необходимо удалить. |
| 2 | addClassName Он имеет тип String и представляет одно или несколько имен классов (разделенных пробелом), которые должны быть добавлены к атрибуту класса каждого совпадающего элемента. |
| 3 | options Здесь представлены все настройки анимации. Все свойства необязательны. Возможные значения -
|
Примеры
В следующем примере демонстрируется использование метода switchClass () .
<!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>
.LargeClass {
font-family: Arial;
font-size: large;
font-weight: bold;
color: Red;
}
.NormalClass {
font-family: Arial;
font-size: small;
font-weight: bold;
color: Blue;
}
</style>
<script>
$(function() {
$('#btnSwitch').click(function() {
$(".NormalClass").switchClass("NormalClass","LargeClass",'fast');
$(".LargeClass").switchClass("LargeClass","NormalClass",'fast');
return false;
});
});
</script>
</head>
<body>
<div class = "NormalClass">
Tutorials Point Rocks!!!
</div>
<div class = "NormalClass">
Welcome to Tutorials Point!!!
</div>
<br />
<input type = "button" id = "btnSwitch" value = "Switch Class" />
</body>
</html>Сохраним приведенный выше код в HTML-файл. switchclassexample.htmи откройте его в стандартном браузере, поддерживающем javascript, вы также должны увидеть следующий вывод. Теперь вы можете поиграть с результатом -
Нажмите кнопку « Сменить класс» , чтобы увидеть эффект классов на поле.