Динамическое управление слоями
Сценарии JavaScript позволяют динамически управлять параметрами установленных слоев. Это позволяет получить такие эффекты, как скрытие и отображение слоя, изменение порядка отображения, перемещение слоя в окне браузера. Все эти эффекты достигаются с помощью изменения соответствующих стилевых параметров установленных слоев.
Для обращения к слоям из сценариев JavaScript, удобнее всего каждому слою дать собственное имя при помощи параметра id. Например:
<div id="div1"> ... </div>
Для того, чтобы скрыть отображение слоя div1, можно использовать следующую команду:
div1.style.visibility='hidden';
Для повторного обображения слоя следует выполнить следующее присвоение:
div1.style.visibility='visible';
Ниже приведен пример документа, использующий динамическую смену слоев для изменения текста на странице html. В данном примере для отображения некоторого слоя следует нажать на соответствующую ссылку. Эту идею можно применить и для организации выпадающих меню.
Листинг 6.2
<HTML> <HEAD> <STYLE type="text/css"> div { position: absolute; top: 20; left: 160; visibility: hidden; } </STYLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function show_d(d) { div1.style.visibility='hidden'; div2.style.visibility='hidden'; div3.style.visibility='hidden'; div4.style.visibility='hidden'; div5.style.visibility='hidden'; d.style.visibility='visible'; } //--> </SCRIPT> </HEAD> <BODY> <a href="javascript:void(0)" onClick="show_d(div1);">показать слой 1</a><br> <a href="javascript:void(0)" onClick="show_d(div2);">показать слой 2</a><br> <a href="javascript:void(0)" onClick="show_d(div3);">показать слой 3</a><br> <a href="javascript:void(0)" onClick="show_d(div4);">показать слой 4</a><br> <a href="javascript:void(0)" onClick="show_d(div5);">показать слой 5</a><br> <div id="div1"> <h3>Слой номер один</h3> Некоторый текст, на слое расположенный. Его можно скрыть и показать. Текст может содержать несколько строк. </div> <div id="div2"> <h3>Слой номер два</h3> Содержит свой текст. Если показывается, то текст на других слоях не виден. </div> <div id="div3"> <h3>Слой номер три</h3> Тоже текст. При работе со слоями надо следить, чтобы текст одного слоя не "выглядывал" из-под другого слоя при самых различных размерах окна браузера и используемых шрифтах. </div> <div id="div4"> <h3>Слой номер четыре</h3> Здесь нет текста. </div> <div id="div5"> <h3>Слой номер пять</h3> И тут тем более нет. </div> </BODY> </HTML>
Комментариев нет:
Отправить комментарий