Знакомства на Just click it
Скоро новый год!
Онлайн радио
Вверх
Новые статьи

Ретро газета в подарок
Архив

Создание скрытого контента

Здравствуйте друзья! Многие из вас должно быть видели на различных сайтах такую интерестную вещь, как скрытый контент, возникающий без перезагрузки страницы при щелчке мышью на каком-либо элементе. Сегодня я расскажу вам как это можно реализовать наиболее простым и элегантным способом.

Существует немало способов, позволяющих реализовать данную процедуру, начиная от создания скрытых фреймов и заканчивая обработкой 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". В первом примере это выглядит так:

 

<div id='a' 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м примере. А вот и код из второго примера:

 

<script>
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>

 

<div id='b' style="display:" >
<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>

 

Наверх
Источник: Создание сайтов
Мы В Контакте Мы на Facebook Лента новостей RSS
Копирование и публикация материалов сайта разрешены только при наличии активной ссылки на источник
2011 - наши дни.. © Контакты | Лого | Реклама на сайте | Вебмастерам
Политика конфиденциальности | Пользовательское соглашение