русс | укр

Языки программирования

ПаскальСиАссемблерJavaMatlabPhpHtmlJavaScriptCSSC#DelphiТурбо Пролог

Компьютерные сетиСистемное программное обеспечениеИнформационные технологииПрограммирование

Все о программировании


Linux Unix Алгоритмические языки Аналоговые и гибридные вычислительные устройства Архитектура микроконтроллеров Введение в разработку распределенных информационных систем Введение в численные методы Дискретная математика Информационное обслуживание пользователей Информация и моделирование в управлении производством Компьютерная графика Математическое и компьютерное моделирование Моделирование Нейрокомпьютеры Проектирование программ диагностики компьютерных систем и сетей Проектирование системных программ Системы счисления Теория статистики Теория оптимизации Уроки AutoCAD 3D Уроки базы данных Access Уроки Orcad Цифровые автоматы Шпаргалки по компьютеру Шпаргалки по программированию Экспертные системы Элементы теории информации

Скрытие элементов Web-страницы в JavaScript

Для скрытия элементов Web-страницы, т.е. для того, чтобы сделать эти элементы невидимыми, а также для того, чтобы восстановить их видимость на Web-странице, используется два свойства каскадных листов стилей: свойство CSS display и свойство CSS visibility.

 

1 Свойство CSS display

 

Свойство display определяет, как элемент должен быть показан на Web-странице, и имеет следующие значения:

  • block - элемент показывается как блочный, применение этого значения для встроенных элементов, например тэга <SPAN>, заставляет его вести подобно блокам - добавляется новая строка в начале и в конце содержимого тэга;
  • inline - элемент отображается как встроенный, использование блочных тегов, таких как <DIV> и <P>, автоматически показывает содержимое этих тэгов с новой строки. Аргумент inline отменяет эту особенность, поэтому содержимое блочных элементов начинается с того места, где окончился предыдущий элемент;
  • none - временно удаляет элемент из документа, занимаемое им место не резервируется и Web-страница формируется так, словно элемента и не было. Изменить значение параметра и сделать его вновь видимым можно с помощью скриптов, обращаясь к свойствам через объектную модель. В этом случае происхоит переформатирование данных на странице с учетом вновь добавленного элемента;
  • пустое значение аргумента (принимаемое браузером по умолчанию) означает, что элемент будет виден на Web-странице.

Использование свойства CSS display показано в примере № 1, где, благодаря этому свойству, в текстовом документе, содержащем несколько глав, содержимое каждой главы по щелчку мыши урезается на экране до названия главы и восстановливается при повторном щелчке мыши.

Пример 1

<HTML>
<HEAD>
<TITLE>Использование свойства display</TITLE>
<SCRIPT>
function showTxt()
{
with (window.event.srcElement)
if (tagName == "H1")
with (document.all.item(id+"p").style)
display=display? "" : "none";
}
</SCRIPT>
</HEAD>
<BODY onClick="showTxt()">
<H1 ID="hd1" ALIGN=center"> Глава 1 </H1>
<P ID="hd1p" STYLE="display:none"> Текст первой главы Текст первой главы Текст первой главы Текст первой главы Текст первой главы Текст первой главы Текст первой главы Текст первой главы Текст первой главы Текст первой главы Текст первой главы . . .
<H1 ID="hd2" ALIGN=center"> Глава 2 </H1>
<P ID="hd2p" STYLE="display:none"> Текст второй главы Текст второй главы Текст второй главы Текст второй главы Текст второй главы Текст второй главы Текст второй главы Текст второй главы Текст второй главы Текст второй главы Текст второй главы . . .
<H1 ID="hd3" ALIGN=center"> Глава 3 </H1>
<P ID="hd3p" STYLE="display:none"> Текст третьей главы Текст третьей главы Текст третьей главы Текст третьей главы Текст третьей главы Текст третьей главы Текст третьей главы Текст третьей главы Текст третьей главы Текст третьей главы Текст третьей главы . . .
</BODY>
</HTML>

По событию onClick вызывается функция showTxt(), которая проверяет наименование отмеченного тэга. Если это тэг <H1>, т.е. щелчок мышки был произведен по названию главы, то значение свойства display для тэга <P&gt, имеющего идентификатор, равный идентификатору отмеченного тэга плюс "p", изменится на противоположное: если текст главы был не виден, он станет видимым и наоборот.

Использование оператора with позволило дважды заменить громоздкое выражение document.all.item(window.event.srcElement+"p").style.display словом display.

Единственным ограничением, накладываемым на этот HTML-документ, является то, что идентификатор тэга <P> каждой главы должен быть равен идентификатору соответствующего тэга <H1> с добавлением бувы "p".

 

2 Свойство CSS visibility

Свойство visibility предназначено для отображения или скрытия элемента Web-страницы, включая рамку вокруг него и фон. При скрытии элемента, хотя он и становится не виден, место, которое элемент занимает, остается за ним. Если предполагается вывод разных элементов в одно и то же место экрана, следует использовать абсолютное позиционирование или воспользоваться свойством display. Свойство visibility может принимать следующие значения:

  • visible - отображает элемент как видимый;
  • hidden - элемент становится невидимым или, точнее, полностью прозрачным, поскольку он продолжает участвовать в форматировании страницы;
  • collapse - если это значение применяется не к строкам или колонкам таблицы, то результат его использования будет таким же, как hidden. В случае использования collapse для содержимого ячеек таблиц, то они реагируют, словно к ним было применено свойство display со значением none, при этом заданные строки и колонки убираются, а таблица перестраивается по новому (этот аргумент не поддерживается браузером MIE).

Использование свойства CSS visibility показано в примере № 2, где с помощью тэгов <DIV> создается двуслойная структура, первый слой которой составляют два элемента формы для ввода текста (тэги <INPUT>), а второй состоит из рисунка (тэг <IMG>).

Пример 2

<HTML>
<HEAD>
<TITLE>Использование свойства visibility</TITLE>
</HEAD>
<BODY TEXT=red>
<INPUT TYPE=button VALUE="Слой 1" onClick="lay1.style.visibility='visible';
lay2.style.visibility='hidden';">
<INPUT TYPE=button VALUE="Слой 2" onClick="lay1.style.visibility='hidden';
lay2.style.visibility='visible';">
<INPUT TYPE=button VALUE="Слои 1 и 2" onClick="lay1.style.visibility='visible';
lay2.style.visibility='visible';">
<DIV ID="lay1" STYLE="position:absolute; left:200;top:100;width:200">
<P>Имя:<INPUT TYPE=text NAME="user_name">
<P>Тел.:<INPUT TYPE=text NAME="tel"></DIV>
<DIV ID="lay2" STYLE="position:absolute; left:200;top:100; z-index:-1; visibility:hidden">
<IMG SRC="fish.gif" WIDTH=200></DIV>
</BODY>
</HTML>

После загрузки Web-страницы на экране будет виден только 1-й слой, поскольку он по умолчанию имеет значение visibile, а для 2-го слоя задано значение hidden.

При нажатии одной из кнопок "Слой 1", "Слой 2" или "Слои 1 и 2 " на экране будут отображаться соответственно первый слой, второй слой или два слоя одновременно, причем в последнем случае рисунок окажется снизу, так как этот слой имеет значение z-index:-1.

Просмотров: 18395

Вы можете --> Заказать скрипт

Вернуться воглавление


Карта сайта Карта сайта укр


Уроки php mysql Программирование

Онлайн система счисления Калькулятор онлайн обычный Инженерный калькулятор онлайн Замена русских букв на английские для вебмастеров Замена русских букв на английские

Аппаратное и программное обеспечение Графика и компьютерная сфера Интегрированная геоинформационная система Интернет Компьютер Комплектующие компьютера Лекции Методы и средства измерений неэлектрических величин Обслуживание компьютерных и периферийных устройств Операционные системы Параллельное программирование Проектирование электронных средств Периферийные устройства Полезные ресурсы для программистов Программы для программистов Статьи для программистов Cтруктура и организация данных


 


Полезен материал? Поделись:

Не нашли то, что искали? Google вам в помощь!

 
 

© life-prog.ru При использовании материалов прямая ссылка на сайт обязательна.