Необходимо не только скрывать, показывать или переключать состояние видимости/невидимости элемента

Опубликовал: admin Monday, June 3, 2024 в категории jQuery, Подборка рецептов | Пока нет комментариев

Необходимо не только скрывать, показывать или переключать состояние видимости/невидимости элемента, но и делать это в течение какого-то, заранее заданного времени. По истечении этого времени элемент должен быть скрыт/показан и дополнительно должна быть вызвана какая-либо функция.

Решение

Для решения используем уже знакомые методы hide(), show() и toggle(). Однако здесь мы учтем то обстоятельство, что эти методы могут принимать некоторые аргументы (листинг 3.1.2).

Листинг 3 .1 .2 . Использование методов hide(), show() и toggle()

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-3-1-2</title>
<content>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
div { border:1px
dotted #369; padding:5px; color:#00f; }
.result { border-bottom:1px dotted #369; }
</style>
<script type="text/javascript">
$(function(){
$("button:eq(0)").click(function(){
$("#test").hide(1000,function(){ $("p:first").text("hide"); });
});
$("button:eq(1)").click(function(){
$("#test").show(2000,function(){ $("p:first").text("show"); });
});
$("button:eq(2)").click(function(){
$("#test").toggle(800,function(){ $("p:first").text("toggle"); });
});
});
</script>
</head>
<body>
<p class="result"> </p>
<button>Hide</button><button>Show</button><button>Toggle</button>
<p>Я шел, спускаясь в темные коридоры, и потом опять поднимаясь
наверх. Я был один. Я кричал, мне не отвечали — я был один в этом обширном,
запутанном, как лабиринт, доме.</p>
<p><em>Ги де Мопассан</em></p>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>example-3-1-2</title>

div { border:1px

dotted #369; padding:5px; color:#00f; }

.result { border-bottom:1px dotted #369; }

</style>

$(function(){

$("button:eq(0)").click(function(){

$("#test").hide(1000,function(){ $("p:first").text("hide"); });

});

$("button:eq(1)").click(function(){

$("#test").show(2000,function(){ $("p:first").text("show"); });

});

$("button:eq(2)").click(function(){

$("#test").toggle(800,function(){ $("p:first").text("toggle"); });

});

</script>

</head>

<body>

<button>Hide</button><button>Show</button><button>Toggle</button>

<p>Я шел, спускаясь в темные коридоры, и потом опять поднимаясь

наверх. Я был один. Я кричал, мне не отвечали — я был один в этом обширном,

запутанном, как лабиринт, доме.</p>

<p><em>Ги де Мопассан</em></p>

</body>

</html>

Обсуждение

В HTML-коде, приведенном в листинге 3.1.2, к кнопкам Hide, Show, Toggle и элементу div с идентификатором test добавился параграф p. Немного позже поясним, для чего он понадобился.

Что касается JavaScript-кода, то точно так же, как в примере из листинга 3.1.1, с каждой кнопкой связывается событие click, при наступлении которого для эле-

мента с идентификатором test вызывается метод, соответствующий его названию на кнопке. Но, в отличие от примера из листинга 3.1.1, методам передаются аргументы. Первый аргумент — число в миллисекундах, определяющее интервал, в течение которого будет происходить скрытие/отображение элемента. Второй аргумент — функция, которая будет вызвана при завершении этого процесса. А элемент p в HTML-разметке требуется только для того, чтобы вставить туда текст с названием использованного метода.

ПРИМЕЧАНИЕ

Методы hide(), show() и toggle() могут принимать еще один аргумент — название эффекта плагина easing, с использованием которого может происходить скрытие/отображение элемента, например show(3000, ‘swing’, fn). По умолчанию возможны только эффекты swing и linear. Чтобы получить больше эффектов, необходимо подключение плагина easing. Подробнее см. http://jqueryui.com/demos/effect/

#easing.

Источник: Самков Г. А. jQuery. Сборник рецептов. — 2-е изд., перераб. и доп. — СПб.: БХВ-Петербург, 2011. — 416 с.: ил. + CD-ROM — (Профессиональное программирование)

Популярное

Категории

Необходимо не только скрывать, показывать или переключать состояние видимости/невидимости элемента

Решение

Обсуждение

Похожие посты:

Комментировать Cancel reply