Методы управления отображением элемента

Для управления отображением элементов предназначены следующие методы.
• show( [<Продолжительность> [, <Функция обратного вызова>] ] ) — отображает элемент.


• hide([<Продолжительность> [, <Функция обратного вызова>]]) — скрывает элемент.
• toggle([<Продолжительность>[, <Функция обратного вызова>]]) — позволяет чередовать сокрытие и отображение элементов. Если элемент скрыт, то он будет отображен, и наоборот.

$(":button").click(function() {
$("р:first").toggle();
});
<р>Абзац</р>
<input type="button" value="Скрыть или отобразить абзац">

После первого щелчка на кнопке абзац будет скрыт. Если щелкнуть второй раз, то абзац будет отображен.

• toggle (<Условие>) — если в качестве параметра указано значение true, то элемент будет отображен (с помощью метода show ()), а если указано значение false, то он будет скрыт (с помощью метода hide ()).

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

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

• slideToggle ( [<Продолжительность> [, <Функция обратного вызова>] ] ) — позволяет чередовать сокрытие и отображение элементов. Если элемент скрыт, то он будет отображен (спущен сверху), и наоборот (поднят снизу вверх).

$("#btnl").click(function() {
$("div").slideDown(1000);
});
$("#btn2").click(function() {
$("div").slideUp(1000);
});
$("#btn3").click(function() {
$("div").slideToggle(1000);

<div style="background-color : green;height :150px;display:none;"> Скрытый элeмeнт</div>
<input type="button" value="Отобразить элемент" id="btnl">
<input type="button" value="Скрыть элемент" id="btn2">
<input type="button" value="Отобразить или скрыть элемент" id="btn3">

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

• fast — 200 миллисекунд;

• normal — 400 миллисекунд;

• slow — 600 миллисекунд.

Отобразим все абзацы.

$("р").show();

Скроем все абзацы.

$("р").hide("slow") ;
$("р").hide(600);

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

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

Внутри функции обратного вызова доступен указатель (this) на текущий DOM-элемент. При щелчке на ссылке вначале скроем ее, а затем по окончании анимации отобразим.

$("a").click(function() {
$(this).hide(600, function() {
$(this).show("normal");
});
return false; // Прерываем переход по ссылке
});

В качестве примера сокрытия и отображения элементов создадим меню, в котором можно отобразить не более одного элемента

Листинг 7.1. Сокрытие и отображение элементов
<html>
<head>
<title>Сокрытие и отображение элементов</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
$("a.menu").click(function() {
// Находим элемент, расположенный сразу после ссылки
var elem = $(this).nextAll("div.elem:first");
if (elem.is(":hidden")) { // Если элемент скрыт
// Скрываем видимые элементы
$("div.elem:visible").hide();
// Отображаем элемент, расположенный сразу после
ссылки
elem.show();
}
else { // Если элемент был отображен ранее
elem.hide(); // Скрываем элемент
}
return false; // Прерываем переход по ссылке
});
});
//-->
</script>
<style>
.menu { color:black; }
.elem { display:none; }
</style>
</head>
<body>
<a href="#" class="menu">Отобразить или скрыть элемент 1</a><br>
<div class="elem">Скрытый элемент 1</div>
<a href="#" class="menu">Отобразить или скрыть элемент 2</a><br>
<div class="elem">Скрытый элемент 2</div>
<a href="#" class="menu">Отобразить или скрыть элемент 3</a><br>
<div class="elem">Скрытый элемент 3</div>
<a href="#" class="menu">Отобразить или скрыть элемент 4</a><br>
<div class="elem">Скрытый элемент 4</div>
</body>
</html>

Изначально все теги <div>, имеющие класс elem, скрыты. При щелчке на ссылке, имеющей класс menu, находим тег <div>, который следует сразу после ссылки. Далее с помощью метода is() проверяем, является ли элемент скрытым. Если да, то скрываем все видимые теги <div>, а затем отображаем элемент, а если нет, то просто скрываем его. И наконец, прерываем переход по ссылке, возвращая значение false.


Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *