<< Пред. стр.

стр. 8
(общее количество: 51)

ОГЛАВЛЕНИЕ

След. стр. >>

<а href= "javascript :doPopup ('path', 'name', 'proper-
ties');'^
Как видите, этот код передает три значения в функцию doPopup, а не
одно. Теперь, чтобы использовать эти значения, просто внесем не-
большие изменения в код JavaScript-функции:
function doPopup(popupPath, popupName, popupProper-
ties) {
window, open (popupPath, popupName, popupProper-
ties);




Перемещение всплывающего окна
на передний план
Одна из проблем со всплывающими окнами заключается в том, что они стремятся ис-
чезнуть из вида. Всплывающие окна сворачиваются на панели задач вместе с неболь-
шой коллекцией рекламы, спрятанной иод главным окном браузера. Если ваш сайт
загрузит другую страницу в открытое всплывающее окно - это происходит часто, ког-
да всплывающее окно используется для отображения подсказок помощи, - опущенное
всплывающее окно не перепрыгнет обратно наверх, если вы определенным образом
не заставите его сделать это.
Чтобы сделать это, добавьте событие onLoad к тегу body HTML-файла всплывающе-
го окна:
<body onLoad="window.focus() ; ">
Инструкция window. focus гарантирует, что всплывающее окно займет верхнюю по-
зицию на рабочем столе, но только когда загрузится страница. Всплывающее окно
снова исчезнет из вида, когда посетитель щелкнет на главном окне браузера.
Если вы действительно хотите раздражать ваших посетителей и предотвратить исче-
зание всплывающего окна из вида, попробуйте следующее:
•cbody onBlur= "window, f o c u s () ; ">
Событие onBlur происходит всякий раз, когда всплывающее окно теряет свою верх-
нюю позицию, после чего инструкция window, f o c u s перемещает всплывающее окно
обратно на передний план. Единственный способ избавиться от подобного всплываю-
щего окна - закрыть его.
Строим Web-сайты
74



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




Добавление ссылки Close
Простой трюк с использованием языка JavaScript позволяет добавить ссылку Close
(Закрыть) в тело вашего всплывающего окна, что было продемонстрировано на ри-
сунке 9.2. Когда посетители щелкнут на этой ссылке, всплывающее окно закроется, из-
бавив их от необходимости использовать кнопку X вверху окна.
Код для этой ссылки выглядит следующим образом:
<а href="javascript:window.close();">Clcse</a>
Для этого даже не нужно создавать отдельную функцию. Одна инструкция
window, c l o s e делает все, что вам необходимо.
ГЛАВА 10.
Создание открывающихся меню
Открывающиеся меню очень популярны в наши дни. Несомненно вы видели их в Ин-
тернете. Вы наводите указатель мыши на элемент главного меню навигации, и появля-
ется меню со связанными элементами. Открывающееся меню обладает стильным эф-
фектом, как показано на рисунке 10.1.




Randy's
Мен & Used Planets


GAS GIANTS

TERRAFORMEO

BARGAIN BIN




Рис. 10.1. Ничто не говорит о стиле так, как всплывающее меню




Определение
Открывающееся меню - это СПИСОК элементов навигации, который
появляется при наведении указателя на элемент в главном меню
навигации.


Реализация открывающихся меню была кошмаром. К счастью, программа Internet
Explorer с версии 5 и программа Netscape с версии 6 поддерживают метод
g e t E l e m e n t B y l d языка JavaScript, упрощающий написание скриптов для всех видов
интерактивных возможностей, включая и открывающиеся меню. Браузеры, понимаю-
щие функцию g e t Element Id, доступны уже пару лет, и теперь они являются домини-
рующими браузерами в Интернете; поэтому для большинства типов сайтов можно с
чистой совестью писать скрипты, используя этот метод. Тем не менее, у более старых
браузеров есть проблемы с данным методом, поэтому, имейте это в виду.
Строим Web-сайты
76




Определение
Динамический HTML, или DHTML, - это комбинация языков HTML и
JavaScript, и каскадных таблиц стилей (CSS).



Динамический HTML, или DHTML, - это комбинация языков HTML и JavaScript и
каскадных таблиц стилей (CSS), которая применяется для создания интерактивных
Web-сайтов. Типичное открывающееся меню является отличным примером языка
DHTML в действии. Макет навигационной панели создается на языке HTML. Элемен-
ты таблиц CSS, называемые слоями, предоставляют меню, а несколько простых функ-
ций на языке JavaScript оживляют меню.



Понятие слоев
Слои (Layers) таблиц CSS, или элементы разделов (Div elements), - это блоки с содер-
жимым, расположенные на Web-странице. В отличие от «плоских» элементов, напри-
мер ячеек таблиц, слои можно накладывать друг на друга и размещать в любой пози-
ции на экране, как показано на рисунке 10.2. В этом отношении слои похожи на окна
на рабочем столе.


Определение
СЛОЙ, ИЛИ элемент раздела, - это блок с содержимым, размещенный
на Web-странице, основанный на таблицах CSS. В отличие от плоских
элементов, например, ячеек таблиц, слои можно накладывать друг на
друга и размещать в любой позиции на экране.




Here a layer...
There a
layer... Everywhere a layer
layer




Puc. 10.2. Слои таблиц CSS - это блоки с содержимым.
В отличие от ячеек таблиц, слои можно накладывать друг на друга
и свободно размещать в любой позиции на странице
ГЛАВА 10. Создание открывающихся меню 77

Над слоями можно производить любые действия, используя язык JavaScript. Их мож-
но анимировать. Можно изменять размер слоев. Их можно сделать перетаскиваемы-
ми. И можно сделать так, чтобы они исчезали и появлялись снова по желанию, что и
использует большинство разработчиков для создания эффекта всплывания в открыва-
ющихся меню.
Каждое открывающееся меню размещается на отдельном слое, как показано на рисун-
ке 10.3. Однако вместо того, чтобы сделать эти слои видимыми, вы указываете, что по
умолчанию они должны быть спрятанными или невидимыми. Меню все еще находят-
ся там же - они запрограммированы в коде, но посетитель не может увидеть их или
взаимодействовать с ними. Они напоминают привидений: невидимые, неосязаемые и
на них нельзя щелкнуть. Меню остаются в данном состоянии до тех пор, пока посети-
тель не наведет указатель мыши на определенную «горячую» точку, например, на
ссылку в навигационной панели. Затем начинает действовать JavaScript-функция и из-
меняет значение свойства v i s i b i l i t y для слоя, который вы хотите показать. В ре-
зультате отобразится скрытый слой, и у вас будет открывающееся меню, как показано
на рисунке 10.4. Другой скрипт, который прячет меню, когда посетитель завершает
работу с ним, снова заставляет слой стать невидимым.

§1 10-03.png@100%
/От,



Randy's
New & Used Planets

VEHICLES*

SUITS




Рис. 10,3. Каждое открывающееся меню находится
на отдельном слое. Для создания эффекта всплывания
по умолчанию слои спрятаны или невидимы
Строим Web-сайты
78




Рис. 10.4. Наведение указателя мыши на категорию навигационной панели
приводит к отображению соответствующего слоя



Размещение открывающихся меню
Будем надеяться, что логика, лежащая в основе открывающихся меню, проста. Чтобы
заставить их работать на практике в вашем макете, может понадобиться немного тя-
желого труда.
Хотите - верьте, хотите - нет, но наилучшим подходом на самом деле является мате-
матический подход, поэтому перед тем, как начать кодировать, подготовьте черновик
и выполните несколько набросков и вычислений.
Предположим, что у нас есть навигационная панель с пятью основными категория-
ми. Предположим также, что высота навигационной панели известна и составляет
19 пикселов, и мы хотим уместить навигационную панель на экране шириной
800 пикселов. Отнимаем 40 пикселов для полос прокрутки и прочего и получаем на-
вигационную панель шириной 760 пикселов. Разделим получившуюся ширину на
пять одинаковых частей, ширина каждой из которых составляет 152 пиксела, как по-
казано на рисунке 10.5.

-< 760 рх >-

I
-*-152px-*-j

Рис. 10.5. Начните с приблизительного наброска дизайна навигационной
панели и вычисления размера каждой ячейки таблицы
ГЛАВА 10. Создание открывающихся меню 79


Совет
Чтобы данные расчеты соответствовали как в программе Netscape,
так и в программе IE, обязательно установите значения следующих
атрибутов промежутков в 0: leftmargin, topmargin, marginwidth
и marginheight в теге body; и border, cellpaddingи cellspac-
ing в каждом теге table.

Теперь перейдем к слоям. Мы знаем ширину каждого слоя: 152 пиксела, как и шири-
на каждой ячейки таблицы навигационной панели. Необходимо рассчитать высоту
каждого слоя, которая зависит от того, сколько навигационных элементов вы хоти-
те расположить на конкретном слое. Очевидно, что это число может изменяться от
меню к меню. Поскольку высота навигационной панели равняется 19 пикселам, уп-
ростим себе жизнь и возьмем высоту в 19 пикселов в качестве стандартной высоты
элемента меню. Высота меню с тремя элементами должна составлять 57 пикселов
(19 умножить на 3), а высота меню с семью элементами - 19 умножить на 7, или
133 пикселов.
Чтобы выровнять слои с ячейками таблицы, положение каждого слоя выражается в
смещении от верхней и левой стороны окна браузера. Таким образом, если высота на-
вигационной панели составляет 19 пикселов, мы желаем разместить слои по вертика-
ли с отступом, равным 19 пикселам от верхней стороны экрана. По горизонтали раз-
мещение слоев начинается с 0 (без смещения от левой стороны) и позиция каждого
нового слоя увеличивается на 152, как показано на рисунке 10.6.
760 рх




Рис. 10.6. Размещение слоев по смещениям от верхней и левой стороны окна браузера


Совет
ЕСЛИ внутри открывающихся меню вместо текстовых ссылок вы ис-
пользуете изображения, не забудьте добавить дополнительное сво-
бодное место в дизайн изображений. Это поможет сделать меню ме-
нее сдавленными.
Строим Web-сайты
80

И, наконец, создайте таблицу для меню в каждом слое, используя одну строку для каж-
дого элемента меню, как показано на рисунке 10.7.

760 рх

-152 рх-




•Р»


Рис. 10.7. Поместите таблицу внутрь каждого слоя для меню.
Каждый элемент меню получает отдельную строку в таблице


Инструментарий Создание открывающихся меню
Этот DHTML-документ демонстрирует создание системы откры-
вающихся меню, как показано на рисунке 10.8. Для простоты, в
навигационной панели и в меню используются текстовые ссылки.
С установленными в 0 значениями свойств border,,
c e l l p a d d i n g и c e l l s p a c i n g , таблицы выглядят компактными.
Замените текстовые ссылки изображениями, у которых достаточ-
но свободного места по вертикали, и ваш макет будет выглядеть
еще лучше, как показано на рисунке 10.9. Однако придется изме-
нить высоту слоев, чтобы разместить более высокие таблицы.



Сяеяогт 1 Category 4




Рис. 10.8. Данный инструментарий создает
систему открывающихся меню
ГЛАВА 10. Создание открывающихся меню 81




Рис. 10.9. Замените текстовые ссылки собственными
изображениями (добавив достаточно свободного места
по вертикали), и меню не будут выглядеть сдавленными

<html>
<head>
<title>Popup Menus</title>
<script language="JavaScript">
function doShowHide(popupMenu) {
/* Данная функция выполняется, когда посетитель на-
водит указатель мыши на элементы навигационной па-
нели. Она получает ID соответствующего меню и де-
лает это меню видимым, при этом скрывая четыре ос-
тальные меню. 7
if (popupMenu == "menul") {
document.getElementById("menul") .style.vi
sibility="visible";
document.getElementById("menu2") . style.vi
sibility="hidden";
document.getElementByld("menu3"] . style.vi
sibility="hidden";
document.getElementByld("menu4"; . style.vi
sibility="hidden";
document.getElementByld("menu5"] . style.vi
sibility="hidden";


if (popupMenu == "menu2") {
Строим Web-сайты
82

document.getElementByld("menul").style.vi
sibility="hidden";
document.getElementByld("menu2").style.vi
sibility="visible";
document.getElementByld("menu3").style.vi
sibility="hidden";
document.getElementByld("menu4").style.vi
sibility="hidden";
document.getElementByld("menu5").style.vi
sibility="hidden";


if (popupMenu ==' "menu3") {
document.getElementByld("menul").style.vi
sibility="Hidden";
document.getElementByld("menu2").style.vi
sibility="hidden";
document.getElementByld("menu3").style.vL
sibility="visible";
document .getElementByld ("menu4") . style, vi.
sibility="hidden";
document.getElementByld("menu5").style.vi
sibility="hidden";


if (popupMenu == "menu4") {
document .getElementByIdv( "menul") .style, v:
:.
sibility="hidden";
document.getElementByld("menu2").style.vi
sibility="hidden";
document.getElementByld("menu3").style.vi
sp.bility="hidden" ;
document.getElementByld("menu4").style.vi
sibility="visible";
document.getElementByld("menu5").style.vi
Sibility="hidden";


if (popupMenu == "menu5") {
document.getElementByld("menul").style.vi
sibi1ity="hidden" ;
document.getElementByld("menu2").style.vi
sibility="hidden";
83
ГЛАВА 10. Создание открывающихся меню

document.getElementById("menu3").style.vi
sibility="hidden";
document.getElementByld("menu4").style.vi
sibility="hidden";
document.getElementByld("menu5").style.vi
sibility="visible";




function doHide(popupMenu) {
/* Эта функция запускается, когда посетитель щел-
кает на кнопке Close (Закрыть) внизу меню. Она по-
лучает ID текущего меню и затем прячет это меню.
Просто, как пирог. */'
document.getElementByld(popupMenu).style.vis
ibility="hidden";


<;/script>
</head>
<body leftmargin=."O" topmargin="0" marginwidth="0"
marginheight=" 0 " >
<!— Теперь по порядку. Создаем код для открывающих-
ся меню. Само меню - это таблица, состоящая из шес-
ти строк: по одной строке для каждого из пяти эле-
ментов меню и еще одна строка для ссылки Close
(Закрыть). Если вам нужно меньше элементов, удали-
те строки из таблицы. Если необходимо больше эле-
ментов, добавьте строки в таблицу. Просто не за-

<< Пред. стр.

стр. 8
(общее количество: 51)

ОГЛАВЛЕНИЕ

След. стр. >>