Реализация закладок с использованием элементов DIV, Java-script, эффекта прозрачности и свойства Z-INDEX

HTML верстка


Обзор HTML/XHTML тэгов, основы CSS и примеры верстки интернет страниц можно найти здесь. Другие приемы веб-дизайна вы также найдете на страницах сайта codingcraft.ru.

Язык Java Script, который используется на этой странице, является скриптовым процедурным языком программирования с динамической типизацией. То, что язык использует динамическую типизацию означает, что при определении переменной нет необходимости задавать ее тип - он автоматически определится в момент присваивания переменной значения. Сочетание объектной модели HTML документа (Document Object Model, DOM), каскадных таблиц стилей CSS и сценариев на Java Script образует технологию Dynamic HTML или просто DHTML.

Java script подсветки закладки


Для подсветки закладки в момент, когда курсор мыши находится над ее заголовком, используется процедура

function zoomin(obj){
 if (obj.style.zIndex == 1)
     return;

 obj.style.zIndex = 2;
 obj.style.opacity = 0.9;
 obj.style.backgroundColor='#eee';
 obj.style.cursor='pointer';
}
, вызов которой прописан для элементов h2 в определении обработчика события onmouseover. Для отмены подсветки, когда курсор мыши покидает область заголовка, используется процедура
function zoomout(obj){
 if (obj.style.opacity==1) 
     return;

 obj.style.zIndex = 0;
 obj.style.opacity = 1;
 obj.style.backgroundColor='#ddd';
 obj.style.cursor='default';
}
прописанная в обработчике события onmouseout. Прозрачностью закладки управляет атрибут opacity, который может принимать значения от 0 до 1.

Java script выбора закладки


При выборе закладки вызывается функция

function OnClick(obj){
 if (obj.style.zIndex == 1)
     deselectbookmark(obj);
 else 
     selectbookmark(obj);
}
, которая в зависимости от установленного значения zIndex либо выбирает закладку (selectbookmark(obj)), либо отменяет ее выбор (deselectbookmark(obj)). Здесь уже обработчик события onclick прописан не для заголовка, а для всей закладки, чтобы при отмене выбора можно было щелкнуть мышью в любом месте закладки, а не только в области заголовка. В обоих случаях в качестве аргумента передается ссылка на закладку, только в контексте заголовка, чтобы сослаться на закладку необходимо использовать свойство parentNode - ссылку на элемент-контейнер, которым для заголовка h2 и является элемент div закладки.


В момент выбора новой закладки необходимо отменить прежний выбор. Для этой цели в процедуре selectbookmark в цикле осуществяется перебор всех закладок и проверка их значения zIndex.

 var divs = SelectChildren(obj.parentNode, 'div');
 for(var i = 0; i < divs.length; i++)
     if (divs[i].style.zIndex == 1)
        deselectbookmark(divs[i]);

Управление порядком отображения


Для изменения порядка вывода на экран элементов используется свойство zIndex - координата Z. Чем меньше значение zIndex элемента, тем раньше он рисуется браузером, а остальные элементы рисуются поверх него. Элементы, имеющие одинаковое значение zIndex (по умолчанию значение zIndex равно 0) рисуются в порядке их появления в html разметке.

Режим позиционирования элементов


Размещение элементов внутри контейнера определяется значениями атрибутов left и top - отступами слева и сверху относительно контейнера/предыдущего элемента или относительно всей страницы или окна браузера. То, относительно чего считать смещение определяется свойством position, которое в нашем случае имеет значение relative (см. определение класса bookmark в CSS). Значение relative определяет, что смещение, заданное атрибутам left и top - это смещение относительно того места, куда бы их поместил браузер в соответствии со своими правилами по умолчанию. Есть еще значение absolute, которое указывает, что позиционирования элемента выполняется отностельно начала страницы или элемента контейнера, а все последующие за ним элементы с относительным позиционированием его не замечают (пропускают при вычислении своей позиции, как будто элемента нет). А значение fixed позволяет привязать элемент к краю экрана, и никакая прокрутка его не сдвинет. На режим позиционирования также влият режим позиционирования элемента-контейнера, поэтмоу понять все тонкости размещения элементов на странице лучше всего на практике. Измените в данном примере relative на absolute и попробуйте восстановить нормальное поведение закладок в режиме абсолютного позиционирования.