HTML: Популярный самоучитель, Чиртик Александр Анатольевич

HTML: Популярный самоучитель

на обложку

Чиртик Александр Анатольевич

Шрифт:

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

Пример реализован следующим образом: вверху окна организуется строка меню, в которой присутствуют два пункта, открывающих два различных меню. Первое меню выглядит так, как показано на рис. 13.5.

Рис. 13.5. Открыто первое меню

Второе меню, вызываемое при выборе второго пункта в строке меню, показано на рис. 13.6.

Рис. 13.6. Открыто второе меню

Как видно, оба меню появляются под соответствующими пунктами строки меню. Теперь рассмотрим, как реализован этот пример, а также какие существуют направления усовершенствования этого примера. Пример разбит на две части: HTML-документ и сценарий (файл popup_menu.js). Сначала разберем текст HTML-документа (пример 13.15).

Пример 13.15. Документ со строкой меню

<!DOCTYPE HTML PUBLIC

«-//W3C//DTD HTML 4.01 Frameset//EN»>

<HTML>

<HEAD>

<TITLE>Страница с меню</TITLE>

.item {background-color: rgb(170, 170, 170)}

.selected {background-color: magenta}

.menu {border-style: ridge; visibility: visible; position: absolute}

.hidden {display: none}

.menu_line {border-style: solid; border-width: 1px;

background-color: rgb(170,170,170); width:100%}

</STYLE>

</HEAD>

<BODY>

<!–Создаем первое меню (изначально оно скрывается)–>

<!–Первый пункт меню–>

<TR id = "menu1_item1" class = "item" onClick = "menu1_item1_click"

onMouseOver = "menu1_item1.className = 'selected'"

onMouseOut = "menu1_item1.className = 'item'">

<TD><IMG src = "icons/1.jpg"><TD>Первый пункт меню

<!–Второй пункт меню–>

<TR id = "menu1_item2" class = "item" onClick = "menu1_item2_click"

onMouseOver = "menu1_item2.className = 'selected'"

onMouseOut = "menu1_item2.className = 'item'">

<TD><IMG src = "icons/2.jpg"><TD>Второй пункт меню

<!–Третий пункт меню–>

<TR id = "menu1_item3" class = "item" onClick = "menu1_item3_click"

onMouseOver = "menu1_item3.className = 'selected'"

onMouseOut = "menu1_item3.className = 'item'">

<TD><IMG src = "icons/3.jpg"><TD>Третий пункт меню

<!–Четвертый пункт меню–>

<TR id = "menu1_item4" class = "item" onClick = "menu1_item4_click"

onMouseOver = "menu1_item4.className = 'selected'"

onMouseOut = "menu1_item4.className = 'item'">

<TD><IMG src = "icons/4.jpg"><TD>Четвертый пункт меню

<!–Пятый пункт меню–>

<TR id = "menu1_item5" class = "item" onClick = "menu1_item5_click"

onMouseOver = "menu1_item5.className = 'selected'"

onMouseOut = "menu1_item5.className = 'item'">

<TD><IMG src = "icons/5.jpg"><TD>Пятый пункт меню

</TABLE>

<!–Создаем второе меню (изначально оно также скрывается)–>

<!–Первый пункт меню–>

<TR id = "menu2_item1" class = "item" onClick = "menu2_item1_click"

onMouseOver = "menu2_item1.className = 'selected'"

onMouseOut = "menu2_item1.className = 'item'">

<TD><IMG src = "balls/ball1.bmp"><TD>Первый пункт меню

<!–Второй пункт меню–>

<TR id = "menu2_item2" class = "item" onClick = "menu2_item2_click"

onMouseOver = "menu2_item2.className = 'selected'"

onMouseOut = "menu2_item2.className = 'item'">

<TD><IMG src = "balls/ball2.bmp"><TD>Второй пункт меню

<!–Третий пункт меню–>

<TR id = "menu2_item3" class = "item" onClick = "menu2_item3_click"

onMouseOver = "menu2_item3.className = 'selected'"

onMouseOut = "menu2_item3.className = 'item'">

<TD><IMG src = "balls/ball3.bmp"><TD>Третий пункт меню

</TABLE>

<!–Вверху страницы организуется строка меню–>

<TR>

<TD class = "item" id = "main_item1"

onClick = "show_menu(menu1, main_menu1, main_item1)"

onMouseOver = "main_item1.className = 'selected'"

onMouseOut = "main_item1.className = 'item'">Показать меню1

<TD class = "item" id = "main_item2"

onClick = "show_menu(menu2, main_menu1, main_item2)"

onMouseOver = "main_item2.className = 'selected'"

onMouseOut = "main_item2.className = 'item'">Показать меню2

</TABLE> <!–Далее идет остальное содержимое страницы–>

Текст страницы...

</BODY>

</HTML>

Хотя документ практически не содержит текста, являющегося обычным содержимым страницы (ведь мы рассматриваем не наполнение страницы текстов, а меню), он все равно получился довольно объемным. Больше всего места в документе примера 13.5 занимают описания двух меню. Описание первого меню практически не отличается от рассмотренного ранее в примере 13.6. Второе же меню, обозначенное как menu2, создано по такому же шаблону.

В таблицу стилей пришлось добавить новый стиль menu_line. После этого очень просто создавать любое количество строк меню на странице. При создании строки меню основной работой является настройка пунктов, которые будут открывать нужные меню (см. определение пунктов в таблице с id, равным main_menu1 в примере 13.5).

При выборе пунктов из строки меню происходит вызов одной и той же функции сценария. Этой функции в качестве параметров передается ссылка на меню, которое нужно открыть, а также ссылки на строку меню и ссылка на пункт, к которому относится показываемое меню. При рассмотрении сценария станет ясно, зачем это нужно.

Ниже приводится текст сценария из файла popup_menu.js (пример 13.16).

Пример 13.16. Содержимое файла popup_menu.js

Функция показывает заданное всплывающее меню под заданным главным пунктом заданного меню

var lastMenu = null; //Предыдущее показанное меню function show_menu(menu, main_menu, item){

if (menu.className == "menu"){

//Закрываем открытое меню hide_menu;

return;

}

if (lastMenu != null)

//Скрываем прошлое меню hide_menu;

//Определяем положение меню menu.className = "menu";

menu.style.top = main_menu.offsetTop + main_menu.clientHeight;

menu.style.left = main_menu.offsetLeft + item.offsetLeft;

lastMenu = menu;

}

//Функция скрывает меню, открытое ранее function hide_menu{

lastMenu.className = "hidden";

lastMenu = null;

}

Далее содержатся функции-обработчики для каждого пункта меню "menu1"

function menu1_item1_click{

hide_menu;

alert("Вы выбрали первый пункт в меню1");

//Другие действия...

}

function menu1_item2_click{

hide_menu;

alert("Вы выбрали второй пункт в меню1");

//Другие

действия...

}

function menu1_item3_click{

hide_menu;

alert("Вы выбрали третий пункт в меню1");

//Другие действия...

}

function menu1_item4_click{

hide_menu;

alert("Вы выбрали четвертый пункт в меню1");

//Другие действия...

}

function menu1_item5_click{

hide_menu;

alert("Вы выбрали пятый пункт в меню1");

//Другие действия...

}

Далее содержатся функции-обработчики для каждого пункта меню "menu2"

function menu2_item1_click{

hide_menu;

alert("Вы выбрали первый пункт в меню2");

//Другие действия...

}

function menu2_item2_click{

hide_menu;

alert("Вы выбрали второй пункт в меню2");

//Другие действия...

}

function menu2_item3_click{

hide_menu;

alert("Вы выбрали третий пункт в меню2");

//Другие действия...

}

Первая функция приведенного в примере 13.16 сценария отвечает за правильное отображение меню. Первый параметр является ссылкой на показываемое меню (таблица в HTML-документе).

Второй и третий параметры используются для корректного позиционирования показываемого меню. Перед тем как будет показано новое меню, скрывается то, которое было показано ранее (если оно имеется). Для этого ссылка на отображаемое меню сохраняется в глобальной переменной lastMenu.

Если пользователь открыл меню, но потом передумал выбирать какой-либо пункт, он должен иметь возможность закрыть меню. В рассматриваемом примере для закрытия меню пользователь должен повторно выбрать тот же самый пункт строки меню.

Основной объем сценария составляют обработчики выбора пунктов меню. Думаю, принцип именования функций-обработчиков в зависимости от принадлежности в меню очевиден. Новой же деталью является наличие в каждом обработчике вызова функции hide_menu. Этим достигается закрытие меню после выбора одного из его пунктов.

Объект screen

Глобальный объект screen предоставляет набор свойств, которые сообщают сценарию некоторую информацию о возможностях видеосистемы компьютера пользователя.

Свойства объекта screen приводятся в табл. 13.10.

Таблица 13.10. Свойства объекта screen

Объект screen может представлять большой интерес для тех, кто заботится о том, чтобы пользователь получал максимум комфорта при просмотре веб-страниц независимо, например, от разрешения своего монитора.

Объект event

Глобальный объект event является большим подарком для тех, кто хочет создавать сценарии, досконально отслеживающие и адекватно реагирующие практически на все действия пользователя. Поддержка этого объекта очень сильно отличается в различных браузерах. В этом разделе рассмотрено использование объекта event только для браузера Internet Explorer.

Свойства объекта event

Итак, используя браузер Internet Explorer, получить доступ к объекту event можно, как к свойству объекта window. Можно также указывать event как глобальный объект. Свойства объекта event приведены в табл. 13.11.

Таблица 13.11. Свойства объекта event

Примеры использования объекта event

Для демонстрации работы с объектом event рассмотрены два небольших примера, использующие информацию о положении указателя и состоянии кнопок мыши.

В первом примере используется возможность получения координат указателя мыши относительно различных объектов документа. Текст HTML-документа примера приведен ниже. Обратите внимание, что благодаря «всплытию» событий отслеживать перемещение мыши можно, только написав обработчик события onMouseMove для элемента BODY (это самый верхний элемент, до которого доходит событие) (пример 13.17).

Пример 13.17. Отслеживание положения мыши

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»>

<HTML>

<HEAD>

<TITLE>Слежение за мышью</TITLE>

.category {font-weight: bold}

.value {font-family: "courier new"}

</STYLE>

function move{

//Записываем в элементы страницы текущее значение

//координат указателя мыши scr.innerText = event.screenX + "x" + event.screenY;

wnd.innerText = event.clientX + "x" + event.clientY;

element.innerText = event.offsetX + "x" + event.offsetY;

prnt.innerText = event.x + "x" + event.y;

//Индикация состояния мыши switch (event.button){

case 0: mouse.innerText = "0|0|0"; break;

case 1: mouse.innerText = "1|0|0"; break;

case 2: mouse.innerText = "0|0|1"; break;

case 3: mouse.innerText = "1|0|1"; break;

case 4: mouse.innerText = "0|1|0"; break;

case 5: mouse.innerText = "1|1|0"; break;

case 6: mouse.innerText = "0|1|1"; break;

case 7: mouse.innerText = "1|1|1"; break;

}

</SCRIPT>

</HEAD>

<DIV style = "border-style: solid; border-width:1px; width: 50%;

position: absolute; left: 50%; background-color: yellow; padding: 2mm">

<SPAN class = "category">Экранные координаты: </SPAN>

<SPAN class = "category">Оконные координаты: </SPAN>

<SPAN class = "category">Относительно элемента: </SPAN>

<SPAN class = "category">Относительно родителя: </SPAN>

<SPAN class = "category">Кнопки мыши (л|c|п): </SPAN>

</DIV>

<H1>Заголовок</H1>

Содержимое страницы...

</BODY>

</HTML>

Приведенный HTML-документ выглядит так, как показано на рис. 13.7.

Рис. 13.7. Отслеживание указателя и состояния кнопок мыши

В следующем примере реализовано перетаскивание элементов страницы с помощью мыши. Перетаскивание элемента начинается при нажатии левой кнопки мыши и заканчивается при ее отпускании. Операции начала перемещения, самого перемещения и «бросания» элемента на новом месте реализованы в обработчиках событий элемента BODY (пример 13.18).