Создание скрытого контента
Здравствуйте дорогие друзья! Многие из вас должно быть видели на различных сайтах такую интерестную вещь, как скрытый контент, возникающий без перезагрузки страницы при щелчке мышью на каком-либо элементе. Сегодня я расскажу вам как это можно реализовать наиболее простым и элегантным способом.
Существует немало способов, позволяющих реализовать данную процедуру, начиная от создания скрытых фреймов и заканчивая обработкой PHP, но все эти способы имеют свои существенные недостатки, связанные как с правильным отображением в браузерах, так и с нежелательной перезагрузкой страницы. Я вам предлагаю реализовать эту задачу при помощи простого JavaScript кода, который будет динамически менять стиль контента.
Выглядеть это будет следующим образом:
![]() |
или
Управляющий JavaScript код в обоих примерах будет один и тот же:
<script>
function disp( e )
{
document.getElementById(e).style.display = ( document.getElementById(e).style.display != «none») ? «none» : ‘ ‘ ;
}
</script>
Если вы изучили мою книгу по JavaScript то тут ничего сложного для вас не будет, но все же для ясности изложения я разберу данный пример на составляющие:
function disp ( e ) {…}— задаем новую функцию с именем disp, которая ожидает переменную e.
document.getElementById(e).style.display — это DOM конструкция языка JavaScript, которая выбирает элемент с заданным ID , далее ищет инструкцию отображения на дисплее для этого элемента.
( document.getElementById(e).style.display != «none») ? «none» : ‘ ‘ ; — инструкция выбора ‘или‘. В общем виде:
a = (условие) ? ‘действие_1’ : ‘действие_2’ ; — производится проверка условия и в зависимости от результата выполняется один из операторов ‘или‘ . Если условие верно, то выполняется действие_1, если нет то действие_2.
В нашем случае если параметр отображения элемента на дисплей не равен ‘none’, то приравняем его к ‘none’, в противном случае сделаем его пустым значением.
Со скриптом мы разобрались, далее тот контент, который мы хотим скрыть помещаем в контейнер <div>…</div>, которому, в свою очередь присваиваем значение ID и стиль style=»display:none». В первом примере это выглядит так:
<table width=»393″ border=»0″>
<tr>
<td width=»383″ height=»124″>
<img src=»../img/articles/display1.jpg» width=»400″ height=»400″>
</td>
</tr>
</table>
</div>
С этим мы тоже разобрались. Теперь остается только придумать как вызвать наш скрипт для изменения параметра отображения нашего контента. Хитрого и в этом ничего нет, для этого мы используем любой элемент с атрибутом OnClick. В моем случае это ссылка <a>…</a> :
<a href=»#» onclick=»disp(‘a’)» align=»center»>Нажмите</a>
Проще говоря, браузер перехватывает щелчок мышью по выбранному нами элементу и запускает скрипт для обработки необходимого события.
Ну вот мы и закончили с созданием скрытого контента, который пользователь может открыть (или не открыть) по своему усмотрению. В заключение хочу сказать, что подобный скрипт может принимать неограниченное колличество значений, одновременно изменяя множество элементов страницы. Например можно одновременно показать один элемент и скрыть другой, как это показано во 2м примере. А вот и код из второго примера:
function disp( e,f )
{
document.getElementById(e).style.display = ( document.getElementById(e).style.display != «none») ? «none» : » ;
document.getElementById(f).style.display = ( document.getElementById(f).style.display != «none») ? «none» : » ;
}
</script>
<p>
<a href=»#» onclick=»disp(‘b’,’c’)» align=»center»>Нажмите. </a>
</p>
</div>
<div id=’c’ style=»display:none»>
<a href=»#» onclick=»disp(‘b’,’c’)» align=»center»>
Нажали) Можете опять нажать!
</a>
</div>