2.7 Команды onUnload и onMouseOut
Это два последних обработчика событий, которые вы должны иметь в своем арсенале: onMouseOut и onUnload. onMouseOver вызывает некое событие, если навести мышь, к примеру, на ссылку. В противоположность ей onMouseOut начинает действовать, если курсор увести со ссылки. Вы также знаете, что команда onLoad запускает скрипт, когда страница загружается. Команда onUnload действует, когда пользователь уходит со страницы.
С мышью:
<A HREF="les10.htm" onMouseOver="window.status='Эй! Убирайся с меня!'; return true" onMouseOut="window.status='Так-то лучше, спасибо'; return true"> Наведите курсор на эту ссылку и уведите обратно</A>
При уходе со страницы:
<BODY onUnload="alert('Уже уходите?')">
Поместив курсор на ссылку и обратно несколько раз, можно увидеть в строке состояния первый эффект. Нажав на ссылку, можно увидеть второй.
Эффекты с мышью, как вы уже догадались, создаются с помощью команд onMouseOver и onMouseOut. Обратите внимание, что между ними ощутимая разница. Вам не нужно, чтобы эти события происходили одновременно. Следовательно, нужно писать их как две абсолютно разные команды, каждая из которых содержит свою команду return true.
Чтобы получить эффект при уходе со страницы, добавляем команду onUnload="alert('Уже уходите?')" в строку BODY. Обратите внимание на двойные и одинарные кавычки. Внутри двойных - одинарные. Вторая пара двойных кавычек означает для браузера конец команды.
Рассмотренные выше команды приведены в примере 2.8, а результат на рис. 2.8.
|
Пример 2.8. Обработчики событий onUnload и onMouseOut |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Команды onUnload и onMouseOut</TITLE>
</HEAD> <BODY onUnload="alert('Уже уходите?')"> <A HREF="les10.htm" onMouseOver="window.status='Эй! Убирайся с меня!'; return true" onMouseOut="window.status='Так-то лучше, спасибо'; return true"> Наведите курсор на эту ссылку и уведите обратно</A> </BODY> </HTML>
|
2.7 Новые окна
Сначала мы рассмотрим, как через команды Javascript открыть новый документ HTML в другом окне. Это делает скрипт
<SCRIPT LANGUAGE="javascript">
window.open('opened.html', 'joe', config='height=300,width=300') self.name="main window"
</SCRIPT>
Расположение на странице
Если вы собираетесь открывать новое окно, ставьте скрипт ближе к концу документа. Проще говоря, пусть он идет в последнюю очередь. Причина простая: сначала загрузится страница, а потом всплывет окошко. Если команда стоит в начале, то окошко всплывет прежде, чем пользователь увидит вашу страницу. Скорее всего он закроет новое окно, не успев им воспользоваться.
window.open
Нельзя сказать яснее, чем это: window (окно) - объект, a open (открыть) - метод, который на него воздействует.
Конфигурация нового окна
Информация об этом находится в круглых скобках (это называется примером) Вот схема, которой нужно следовать: ('URL документа в новом окне', 'Название нового окна', config='параметры нового окна').
В примере: ('opened.html','joe',config='height=300,width=300'),
-
opened.html - это URL страницы, которая появится в новом окне. Если страница располагается на другом сервере, то добавьте http:// и так далее.
-
joe - название нового окна.
-
config= указывает, что следующие команды относятся к конфигурации нового окна.
Обратите внимание, что команды height (высота) и width (ширина) разделены только запятой без пробелов, а значения поставлены в одинарные кавычки, так как эти два элемента являются подкомандами config. Пробел для браузера означает конец команды. Есть множество подкоманд для команды config. Про высоту и ширину вы уже знаете, они определяются в пикселях. Остальные подкоманды употребляются со словами «yes» или «no» в зависимости от того, нужны ли в новом окне эти элементы. (Можно ставить «1» вместо «да» и «0» вместо «нет».) Помните, никаких пробелов между подкомандами и одинарные кавычки.
-
toolbar= отвечает за наличие панели инструментов c кнопками НАЗАД, ВПЕРЕД, СТОП и т.д.
-
menubar= отвечает за наличие строки меню с элементами ФАЙЛ, ПРАВКА, ВИД и т.д.
-
scrollbars= отвечает за наличие полосы прокрутки.
-
resizable= указывает, сможет ли пользователь изменить размер окна по своему желанию. Лучше не ставить здесь «нет», если только это не художественная инсталляция.
-
location= отвечает за наличие адресной строки, где виден URL страницы.
-
status= отвечает за наличие строки состояния.
От строки с заголовком вы не избавитесь никогда, хотите вы этого или нет.
Тэги в новом окне
Во всплывающем новом окне есть две ссылки. Первая открывает домашнюю страницу HTML Goodies в главном окне. Вот как это делается:
<A HREF="http://www.htmlgoodies.com" TARGET="main window"></A>
У большого окна есть имя, «main window» (главное). Вот почему я называл его главным на протяжении всего урока. В скрипте это обозначено строкой self.name="main window". Добавляем в ссылку HREF TARGET= (цель) и указание на main window.
Если надо, чтобы страница загружалась в маленьком окошке (оно называется «joe»), просто нужно написать «joe» после команды TARGET.
С помощью многократных команд window.open можно вызывать многократные окна. Только следите за тем, чтобы у каждого нового окна было свое имя. Можете связывать окна ссылками при условии, что правильно указываете имена окон в команде target.
Закрыть окно
Вторая ссылка нового окна закрывает его. Вот как это сделано:
<A HREF="" onClick="self.close">Щелкните, чтобы закрыть</A>
Это обычная ссылка HREF, которая никуда не ведет. Команда onClick="self.close" закрывает окно и никуда не ведет. self (само, себя) - это свойство может относиться к любому объекту. В нашем случае это свойство окна. Команда close (закрыть) закрывает окно.
Еще кое-что
Допустим, вы хотите открыть окно по команде, а не когда пользователь заходит на страницу. Вот как это можно сделать:
<A HREF="les11.htm" onClick="window.open('opened.html', 'joe', config='height=300,width=300')">Щелкните, чтобы открыть 'joe'</A>
Это ссылка HREF, которая направлена на себя. Команда onClick делает работу, а параметры содержатся в скобках().
Рассмотренные выше команды приведены в примере 2.9, а результат выполнения на рис. 2.9.
|
Пример 2.9а. Открытие нового окна |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Открытие нового окна</TITLE> </HEAD> <BODY> <A HREF="4.htm" onClick="window.open('opened.htm', 'joe', config='height=300,width=300')">Щелкните, чтобы открыть новое окно</A> <SCRIPT type="text/javascript"> window.open('opened.htm', 'joe', config='height=300,width=300') self.name="main window" </SCRIPT> </BODY> </HTML>
|
|
Пример 2.9б. Новое окно с ссылками (файл opened.htm) |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Новое окно - JOE</title> </head> <body bgcolor="D6E4E7" text="000000" link="0000ff" vlink="800080" alink="ff0000"> <p align="center"><big>Это новое окно,<br> я назвал его "Джо".</big> <p align="center"><a href="http://www.htmlgoodies.com" target="main window">Если щелкнeте сюда, получите <br> HTML Goodies в главном окне.</a> <p align="center"><a href="http://www.htmlgoodies.com" target="joe">Если щелкнeте сюда, получите <br> HTML Goodies в этом окне.</a> <p align="center"><a href="" onClick="self.close()">Щелкните сюда, <br> чтобы закрыть это окно.</a> </BODY> </HTML>
|
