Читать онлайн «HTML: Популярный самоучитель». Страница 34

onMouseOver = "item3.className = 'selected'"

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

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

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

<TR id = "item4" class = "item" onClick = "item4_click()"

onMouseOver = "item4.className = 'selected'"

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

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

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

<TR id = "item5" class = "item" onClick = "item5_click()"

onMouseOver = "item5.className = 'selected'"

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

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

</TABLE>

</BODY>

</HTML>

Из приведенного текста можно увидеть, каким образом используется таблица: пунктами меню являются строки таблицы. Чтобы строки таблицы подсвечивались при наведении указателя мыши, их стилевой класс динамически изменяется при обработке событий onMouseOver, onMouseOut. Изменив определения стилевых классов item, selected, menu, можно легко добиться нужного вида меню.

При выборе каждого из пунктов меню вызывается соответствующая функция‑обработчик (см. значения атрибутов onClick для элементов TR). Все функции‑обработчики собраны в файле menu.js, текст которого приводится ниже (пример 13.7).

Пример 13.7. Содержимое файла menu.js

/*

В этом файле содержатся функции-обработчики для каждого пункта меню

*/

function item1_click(){

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

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

}

function item2_click(){

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

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

}

function item3_click(){

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

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

}

function item4_click(){

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

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

}

function item5_click(){

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

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

}

В каждую их приведенных выше функций помещен только код, сообщающий о работоспособности отдельного пункта меню.

Глобальный объект navigator позволяет получить некоторую информацию о браузере, в котором происходит просмотр страницы со сценарием. Свойства объекта navigator, поддерживаемые большинством браузеров (по крайней мере, не только браузером Internet Explorer), приведены в табл. 13.5.

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

Часто использовать объект navigator нет необходимости, однако он может очень пригодиться при создании достаточно продвинутых и «живучих» веб‑страниц, способных выбирать сценарии для выполнения в зависимости от браузера, в котором они открываются. Простейший код, позволяющий отличить браузер Internet Explorer, приведен ниже (пример 13.8).

Пример 13.8. Определение браузера

function do_script(){

if (navigator.appName == "Microsoft Internet Explorer"){

//Код для Internet Explorer...

}

else{

//Код для другого браузера...

}

}

Глобальный объект window предоставляет возможности по манипулированию окном браузера или окном фрейма, в котором открыт документ со сценарием. Кроме того, при помощи объекта window можно открывать новые окна, манипулировать фреймами, создавать таймеры (что очень нужно для анимации) и делать еще много полезного.

Свойства и методы объекта window

Основные свойства объекта window приводятся в табл. 13.6.

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

В табл. 13.7 приведены основные методы объекта window.

Таблица 13.7. Методы объекта window

Как было сказано при описании метода open() в табл. 13.7, для этого метода предусмотрено несколько дополнительных параметров. Основные параметры перечислены в табл. 13.8.

Таблица 13.8. Параметры метода open()

Каждый из приведенных в таблице параметров может добавляться в строку параметры в виде: имя_параметра = значение. Так, для открытия документа в новом окне размером 300 × 400 можно использовать следующий вызов метода open():

window.open(«13.6.html», "", «width = 300, height = 400»);

Вообще, по крайней мере в браузере Internet Explorer, разделителем параметров в строке необязательно может быть запятая. Этот браузер нормально воспринимает в качестве разделителя и пробел, и точку с запятой. Еще при испытаниях метода open() в Internet Explorer замечена следующая особенность: если в строке задан хотя бы один параметр, то значения всех остальных параметров, принимающих значения 0 или 1, сбрасываются в 0. Так, созданное приведенным выше вызовом метода open() окно будет отображаться без строки состояния, панели инструментов, строки меню, полос прокрутки, строки адреса и будет неизменяемого размера.

Как можно было заметить, в табл. 13.8 приведены параметры, позволяющие задать ширину нового окна, но не приведены параметры, задающие положение окна. Эти параметры в действительности есть, но они отличаются для различных браузеров. Для Internet Explorer это left и top, а для Navigator – screenX и screenY.

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

Теперь рассмотрим, как можно использовать объект window для воспроизведения анимации в окне браузера.

Методы, позволяющие создавать таймеры, просто незаменимы при работе с анимацией средствами браузера. Суть данного примера состоит в последовательной загрузке изображений в элемент IMG. Интервал между сменами кадров выдерживается с помощью таймера. Всего кадров шесть (рис. 13.3).

Рис. 13.3. Изображения-кадры

Кадры меняются от первого до шестого, а затем от шестого до первого. Текст HTML‑документа со сценарием, реализующим смену кадров, приведен ниже (пример 13.9).

Пример 13.9. Анимация на странице

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

"http://www.w3.org/TR/html4/frameset.dtd">

<HTML>

<HEAD>

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

</HEAD>

<BODY>

<SCRIPT type = "text/javascript">

//Назначаем функцию, вызываемую по таймеру и меняющую

//изображения window.setInterval(new_frame, 300);

var inc = 1;

var curFrame = 1;

var maxFrame = 6;

//Функия смены кадров function new_frame(){

//Покажем текущий кадр animate.src = "frames/" + curFrame + ".gif";

//Переход на следующий кадр curFrame += inc;

if (curFrame > maxFrame){

//Начинаем воспроизведение в обратном порядке curFrame = maxFrame;

inc = –1;

}

else if (curFrame == 0){

//Начинаем воспроизведение в прямом порядке curFrame = 1;

inc = 1;

}

}

</SCRIPT>

<IMG id = "animate" src = "frames/1.gif">

</BODY>

</HTML>

В коде сценария количество кадров задается в переменной maxFrames. Предполагается, что кадры помещаются в папке frames и имеют имена вида номер.gif.

Создание всплывающих окон

Иногда бывает удобно использовать дополнительные так называемые всплывающие окна, например, чтобы открывать в них список файлов для закачки, если речь идет о каком‑то веб‑архиве. Как вы уже догадались, в этом примере для открытия новых окон используется метод open() объекта window. Кроме открытия нового окна, в приведенном ниже примере 13.10 реализовано также его закрытие через 5 секунд.

Пример 13.10. Создание и закрытие всплывающего окна

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

"http://www.w3.org/TR/html4/frameset.dtd">

<HTML>

<HEAD>

<TITLE>Всплывающие окна</TITLE>

</HEAD>

<BODY>

<SCRIPT type = "text/javascript">

//Функция открывает окно\

function open_window(){

wnd = window.open("13.9.html", "asd", "height = 200, width = 350");

//Функция закрытия окна вызывается через 5 секунд window.setTimeout(wnd.close, 5000);

}

</SCRIPT>

<P>Щелкните

<INPUT type = "button" value = "кнопку" onClick = "open_window()">

чтобы открыть новое окно на 5 секунд.

</BODY>

</HTML>

Помните, что использовать всплывающие окна следует оправданно. Чаще всего пользователя очень раздражают появляющиеся неожиданно окна, например с какой‑нибудь рекламой.

Объект style, который для большинства элементов страницы поддерживается как свойство, предоставляет большие возможности по манипулированию стилем элементов. Эти возможности такие же, как и доступные при использовании таблиц стилей: можно получать и указывать значения тех же свойств, что и с использованием CSS. Сначала рассмотрим, как формируются имена свойств объекта style.

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

Итак, имена свойств CSS, состоящие из одного слова, в таком же виде и используются как имена свойств объекта style, например:

el.style.width = 100;

el.style.color = "red";

Здесь el предоставляет доступ к элементу страницы со значением атрибута id, равным «el».

В приложении 2, где приведен список основных свойств CSS, можно увидеть, что названия многих свойств состоят из нескольких слов, разделенных символом –. Так вот, имена таких свойств CSS преобразуются в имена свойств объекта style следующим образом: первое слово имени записывается cо строчной буквы, остальные слова начинаются с прописной буквы, все символы – из имени свойства удаляются. Ниже приведен пример для того же элемента el:

el.style.borderStyle = «solid»; //свойство border-style

el.style.borderColor = "blue"; //свойство border-color

el.style.borderBottomWidth = "10mm"; //свойство border-bottom-width

Как видно, значения свойств могут быть в тех же единицах измерения, которые применяются для CSS. Однако это хорошо до тех пор, пока не нужно производить вычисления с использованием текущих параметров элемента. Так, в приведенном выше примере el.style.borderBottomWidth вернет строковое значение «10mm». Удобно ли производить вычисления с такими значениями? В табл. 13.9 приведен перечень дополнительных свойств, поддерживаемых только интерпретатором браузера Internet Explorer, но значительно облегчающих программирование таких вещей, как перемещение элементов страницы.