- •2. Что такое события в JavaScript
- •2.1. Как связать событие и JavaScript
- •2.3. Основные события в JavaScript
- •2.4. События, о которых не было сказано
- •3. Return к функциям (функции и события)
- •4. Еще один пример использования функций и событий
- •5. События и его свойства (Event)
- •5.1. Передача объекта Event внутрь обработчика события
- •5.2. Всплывание события cancelBubble
- •5.3. Вызов стандартного обработчика
- •5.4. Практика работы с мышью: перетаскивание элементов
- •6. Функции (нюансы) Итак, события мы рассмотрели полностью, но в функциях существует множество нюансов, поэтому следующая тема будет посвящена именно им.
- •6.1. Знакомство с рекурсией.
- •Пример на рекурсию
- •Р екурсии или итерации?
- •6.2. Функция – это переменная. Несколько видов объявлений функций.
- •6.3. Функция внутри функции
- •6.4. Условная функция
- •7. Самостоятельное задание:
4. Еще один пример использования функций и событий
В прошлом уроке мы написали классную функцию, которая прячет элемент и показывает его, если он уже спрятан, вот она:
function toggle(elementid) { var el = document.getElementById(elementid); if (el) { if (el.style.display != 'none') { el.style.display = 'none'; } else { el.style.display = ''; } } }
Как вы думаете можно ли эту функцию привязать к какому-либо событию? Конечно можно. К примеру, можно заставить что-то исчезать, нажав на кнопку и появляться, нажав на ту же самую кнопку. Давайте сделаем панель, которая будет появляться, когда мы будем нажимать на кнопку. Мы сразу напишем пример и не будем его разбирать по кускам, вам нужно будет просто разобрать HTML код. А куда будет привязана данная функция и как она работает это уже должно быть понятно каждому.
<html> <head> <style> html, body { margin: 0px; padding: 0px; } #panelcontainer { position: absolute; z-index: 2; width: 100%; } #button { height: 40px; line-height: 40px; text-align: center; background: #eee; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; } #button span { background: #ddd; padding: 2px 5px; border: 1px solid #aaa; cursor: pointer; } #panel { background: #f7f7f7; padding: 20px; display: block; } #maincontainer { position: absolute; z-index: 1; width: 100%; top: 42px; } </style> <script> function toggle(elementid) { var el = document.getElementById(elementid); if (el) { if (el.style.display != 'none') { el.style.display = 'none'; } else { el.style.display = ''; } } } </script> </head> <body onLoad="javascript: toggle('panel');"> <div id="panelcontainer"> <div id="panel">
В этой панели вы можете разместить все, что захотите.<br>И она будет поверх всего содержимого.
</div> <div id="button">
<span onClick="javascript: toggle('panel');">Всплывающая панель</span>
</div> </div> <div id="maincontainer"> Здесь разместите свой сайт.
</div> </body> </html>
Самое главное – это красиво оформить страницу при помощи CSS, а эффект JS не так уж и много занимает места. И как заметили это эффект работает не так уж и сложно.
При помощи этой функции так же можно сделать и всплывающее меню. Точно так же как и в предыдущем случае, нужно красиво это меню оформить, а прицепить код выполнения – это проще простого: заставить появляться меню, когда мы наводим на пункт меню, и исчезать, когда мы от него теряем фокус.
Давайте мы попробуем реализовать меню в виде списков:
<html> <head> <style> html, body { margin: 0px; padding: 0px; } #menu { clear: both; } #firstlevel, #firstlevel li { position: relative; display: block; float: left; height: 40px; line-height: 40px; margin: 0px; padding: 0px; text-align: center; } #firstlevel li a { display: block; margin: 0px 20px; } #secondlevel { position: absolute; top: 40px; display: block; margin: 0px; padding: 0px; } #secondlevel li { position: relative; clear: both; display: block; float: left; height: 30px; line-height: 30px; margin: 0px; padding: 0px; overflow: hidden; background: #fff; width: auto; } #main { clear: both; } </style> <script> function toggle(elementid) { var el = document.getElementById(elementid); if (el) { if (el.style.display != 'none') { el.style.display = 'none'; } else { el.style.display = ''; } } } </script> </head> <body onLoad="javascript: toggle('secondlevel');"> <div id="maincontainer"> <div id="menu"> <ul id="firstlevel"> <li> <a href="#">Первый пункт меню</a> </li> <li onmouseover="javascript: toggle('secondlevel');" onmouseout="javascript: toggle('secondlevel');" > <a href="#">Второй пункт меню</a> <ul id="secondlevel"> <li> <a href="#">Вложеный первый пункт меню</a> </li> <li> <a href="#">Вложеный второй пункт меню</a> </li> <li> <a href="#">Вложеный третий пункт меню</a> </li> </ul> </li> <li> <a href="#">Третий пункт меню</a> </li> </ul> </div> <pre id="main"> Текст </pre> </div> </body> </html>
Видите, и опять как всегда все дело в стилях CSS, а само меню просто либо исчезает, либо появляется при помощи нашей магической функции toggle. Забавно. Так же вы можете самостоятельно сделать третий уровень меню и т.д. Кстати, если появиться еще одно выдвижное меню ему нужно давать новый идентификатор, потому что, во-первых, не может на странице присутствовать несколько идентификаторов, а во-вторых, если бы даже это было допустимо, то эти две меню одновременно скрывались и появлялись. А если вы укажете два идентификатора одинаковых, то функция document.getElementById будет находить только первый элемент с этим именем.
Если вы еще до сих пор не умеете управляться с CSS стилями, то самое время научиться это делать, а то кроме написания бесполезного кода вы ничего не добьетесь.