|
Наверное самый главный, или точнее, чаще всего использованый прием в dHTML-е, это прятание и показывание слоев. И тут нужно сделать еше замечание - слоев и элементов. Надеюсь, понимаете отличие между просто элемента страницы и слоя.
"Спрятать" или "Убрать"?
В CSS есть две свойства, на первый взглят очень похожие друг на друга, но по своей сути очень сильно различающиеся. Это свойства display и visibility.
Свойство display
Несмотря на то, что у display есть четыре возможные значения, на самом деле нам интересны только две из них: none и block. Первоe не просто скрывает элемента, устанавливая значение elemdisplay = "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 не упоминается вообще, но если хотите сообщить посетителю страницы, что его браузер не поддерживает какие-то исключительные "фичи", то можете сделать это простым алертом. Простой пример - в коде этой страницы
Сомневающимся в собственных возможностях даю домашнее задание:
Напишите функции, которые будут показывать или прятать и ставить или убирать элементы в зависимости от их текущее состояние. Т.е. если слой спрятан - покажите и т.п.
Надеюсь, написал все достаточно внятно ;-)
Москва, 24 ноября 2000 |
Leechy |
|
