Сегодня я расскажу про свою реализацию появляющегося div блока. В последнее время он становится все популярнее. И это понятно, информация не перегружает страницу и поваляется только по запросу пользователя. Примером могут служить комментарии внизу этой страницы. После нажатия кнопки “Комментарии для пользователей li.ru” появляется сама форма для комментария. Итак, приступим к реализации.
Все будет сделано с помощью JavaScript и CSS. Для начала пишем такой javascript код и сохраняем его в отдельном файле, скажем, show.js.
function show(nodeId)
{
var node = document.getElementById(nodeId);
if (node)
{
if (node.style.display=='none')
{ node.style.display = 'block'; }
else
{ node.style.display = 'none'; }
}
}
Как можно заметить, код состоит из одной функции Show. Далее мы инициализируем новую переменную node. Потом проверяем было ли получено значение node. После чего стоит проверка, если у элемента в css было прописано значение display = none (то есть, блок не показывается), то меняем его на block (соответственно делаем видимым). Ну и наоборот. Теперь немного про node. Это есть id нужного нам div’a. Далее вы поймете о чем идет речь. Самое приятное, что такой скрипт не привязан к определенному блоку, то есть на страницы таких блоков будет несколько.
Теперь в самом html документе подключаем наш js скрипт. Для этого перед тегом добавляем строчку:
<script src="show.js" type="text/javascript"></script>
Ну и остается сам div блок, а так же элемент, на который будет срабатывать javascript: кнопка, ссылка, изображение. Просто событием onClick передаем в функцию Show параметром id нашего div’a (тот самый node). Ниже пример с кнопкой:
<input onclick="show('div_id')" type="button" value="Показать
все что скрыто!" />
<div id="div_id" style="display:none">Тут скрытая информация</div>
Вот собственно и все. Как видите, все достаточно банально, а пользы много. В планах есть сделать не просто появляющийся, но выезжающий блок, типа таких, которые есть вконтакте. Как я уже говорил, примером данного кода может служить кнопка внизу страницы “Комментарии для пользователей li.ru”. Кстати, об этих самых комментариях и пойдет речь в моем следующем посте.
[ad#ad-1]
