Знакомства на 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 - наши дни.. © Контакты | Лого | Реклама на сайте | Вебмастерам
Политика конфиденциальности | Пользовательское соглашение