PHP SQL
PHP SQL .ru
  Главная  Уроки  PHP  MySQL  jQuery  RegEx  CSS  Книги  Форум  
 Функции


  На главную

  Назад  Вперед

  Печать

Управление отображением элемента

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

Для управления отображением элементов предназначены следующие методы.

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

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

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

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

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

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

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

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

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

$("#btnl").click(function()   { 
  $("div").slideDown(lOOO);
});
$("#btn2").click(function()   {
$("div").slideUp(lOOO);
});
$("#btn3").click(function()   { 
  $("div").slideToggle(1000);
});
<div style="background-color : green ,-height :15Opx;display:none;"> 
Скрытый элемент</М^>
<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, functionO {
$(this).show("normal");
});
return false; // Прерываем переход по ссылке
});

В качестве примера сокрытия и отображения элементов создадим меню, в котором можно отобразить не более одного элемента (листинг 7.1).
Листинг 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.

 
Предыдущая   На главную   Следующая          

Ваш комментарий:

'

Реклама на сайте | Обмен ссылками | Ссылки | Контакты
Добавить статью | Добавить исходник
2010-2014 © phpsql.ru