Начало · Справочники · Курсы · Разговоры

leechy.ru · Сайт почти придуман

Играем в прятки

Наверное самый главный, или точнее, чаще всего использованый прием в dHTML-е, это прятание и показывание слоев. И тут нужно сделать еше замечание — слоев и элементов. Надеюсь, понимаете отличие между просто элемента страницы и слоя.

«Спрятать» или «Убрать»?

В CSS есть две свойства, на первый взглят очень похожие друг на друга, но по своей сути очень сильно различающиеся. Это свойства display и visibility.

Свойство display

Несмотря на то, что у display есть четыре возможные значения, на самом деле нам интересны только две из них: none и block. Первоe не просто скрывает элемента, устанавливая значение display = "none" элемент изымается из HTML-потока и страница меняет свой вид, как будто этого элемента вообще небыло. Второе наоборот, вставляет скрытый элемент в поток, тем самым как бы раздвигая остальные элементы, делая себе место.

Пример: убрать / поставить предыдущий абзац.

Свойство visibility

В отличие от display, visibility не трогает HTML-поток. Просто прячет или показывает определенный элемент. У него есть одна маленькая особенность: у visibility есть две значения visible и hidden, только NN4 понимает в качестве значения не их, а show и hide соответственно. Но хорошо, что хоть их понимает ;-)

Пример: скрыть / показать предыдущий абзац.

Netscape 4.x

К сожалению четвертый нетскейп рендерит страницу только один раз. Во время загрузки. И несмотря на то, что он понимает, что это за свойство display, он не позволяет менять его значение после окончательной загрузки страницы. Это сразу-же накладывает огромные ограничения на то, что можно проделать со страницы. Если конечно стоит за цель, чтобы динамика работала в NN4.

Все, что подвластно JavaScript-у в NN4 — это слои. Как заданные с помощью эго эксклюзивного тэга <layer>, так и просто абсолютно или относительно спозиционированные элементы. Это нужно учитывать всегда, еще на этапе продумывания скрипта.

А теперь рассмотрим более подробно

Как это делается?

NN4

Как я писал раньше, все слои в NN4 объединены в коллекцию document.layers. Свойство visibility — это свойство самого объекта layer и его значение доступно с помощью вызова:

document.layers['elemId'].visibility

Устанавливаются значения так:

document.layers['elemId'].visibility = "show";
document.layers['elemId'].visibility = "hide";

elemId в случае, это значение атрибута id для данного элемента. Нужно помнить, что элемент должен быть обязательно слой!

MSIE4

В MSIE существует коллекция, которая объединяет все элементы страницы — document.all. Кроме этого, visibility, также как и display — это свойства под-объекта style, который существует для каждого элемента. Соответственно, и с учетом того, что значения немного отличаются, значения присваиваются вот таким способом:

document.all['elemId'].style.visibility = "visible";
document.all['elemId'].style.visibility = "hidden";

DOM

Совместимы с DOM браузеры ведут себя точно также, как и MSIE4, но элементы не собраны в коллекцию, а доступны посредством функции getElementById(). В остальном — все тот-же под-объект style:

document.getElementById('elemId').style.display = "none";

В итоге...

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

Показать и спрятать

showElem() показывает невидимый слой, а hideElem() — скрывает:

function showElem(elemId) {
   if (dom) document.getElementById(elemId).style.visibility = "visible";
   else if (ie4) document.all[elemId].style.visibility = "visible";
   else if (nn4) document.layers[elemId].visibility = "show";
} 
 
function hideElem(elemId) {
   if (dom) document.getElementById(elemId).style.visibility = "hidden";
   else if (ie4) document.all[elemId].style.visibility = "hidden";
   else if (nn4) document.layers[elemId].visibility = "hide";
} 

В идеале, конечно должна стоять и проверка на существование этого самого слоя для NN4 или на существование такого элемента вообще. Но мне кажется, что эти проверки должны осуществляться в других функциях, которые будут использовать showElem() и hideElem() в своих целях.

Поставить и убрать

putElem() и removeElem() аналогично вставляют и убирают выбранный элемент:

function putElem(elemId) {
   if (dom) document.getElementById(elemId).style.display = "block";
   else if (ie4) document.all[elemId].style.display = "block";
}

function removeElem(elemId) {
   if (dom) document.getElementById(elemId).style.display = "none";
   else if (ie4) document.all[elemId].style.display = "none";
}

Из примеров видно, что если браузер не поддерживает то или иное свойство, то он просто не будет реагировать никак. В последних двух функциях NN4 не упоминается вообще, но если хотите сообщить посетителю страницы, что его браузер не поддерживает какие-то исключительные «фичи», то можете сделать это алертом. Простой пример — в коде этой страницы

Сомневающимся в собственных возможностях даю домашнее задание:
Напишите функции, которые будут показывать или прятать и ставить или убирать элементы в зависимости от их текущее состояние. Т. е. если слой спрятан — покажите и т. п.

Надеюсь, написал все достаточно внятно.