Глава 5

Глава 5. АВТОМАТИЗАЦИЯ ВЗАИМОДЕЙСТВИЯ ПОЛЬЗОВАТЕЛЯ С WEB-СТРАНИЦАМИ

Использование стилей для изменения свойств объекта

Таблицы стилей можно включать в разрабатываемые страницы различными способами: создать файлы таблицы стилей, связанный со страницей или импортируемый в одну или несколько страниц; внедрить таблицу в документ; включить правило стиля непосредственно в элемент HTML; включить стиль для описания объекта в сценарий при обработке события. В рассматриваемом примере показано, как можно управлять расположением объекта на странице, а также, каким образом можно его скрывать при начальной загрузке, а затем делать видимым. Воспользовавшись гиперссылкой - ПРИМЕР19, можно увидеть Web-страницу в двух состояниях, как это показано на рисунках 39 и 40.

Рис. 39. Начальное состояние Web-страницы после загрузки в браузер

В примере создано пять объектов: две командные кнопки; рисунок; текстовое окно; контейнер с текстом. При загрузке Web-страницы в окно браузера пользователь видит только одну командную кнопку с наименованием «Просмотр объектов». Когда указатель мыши наезжает на кнопку, появляется текст: «нажмите на кнопку, и вы увидите различные варианты скрытия объектов». Этот текст заключен в теге-контейнере <DIV> с именем m1, которому в начальном состоянии назначен параметр (стиль) hidden (скрыть). В таблице стилей, которая создана внутри тега <STYLE>, заданы параметры для абсолютного позиционирования текста на экране, его шрифт, цвет и размер рамки вокруг текста. Событие наезда указателя мыши на командную кнопку (объект с именем B2 – «Просмотр объектов») позволяет изменить параметр объекта m1, присвоив ему значение видимый (“visible”). Обратите внимание, что обработчики событий наезда и увода указателя мыши на объект записаны в теге:

<Input Type=Button Name=B2 ID=d1 Value="Просмотр объектов"

onmouseover="m1.style.visibility='visible'"

onmouseout="m1.style.visibility='hidden'">

Необходимо помнить, что двойные кавычки в данном случае применяются для описания объекта и его свойства, а одинарные кавычки используют внутри двойных кавычек.

После того, как пользователь щелкнет указателем мыши по кнопке с наименованием «Просмотр объектов», эта кнопка становится невидимой, а на Web-странице появляются три дополнительных объекта: командная кнопка с именем B1, рисунок с именем R1 и текстовое окно с именем T1.

Рис. 40. Новое состояние страницы в окне браузера после ввода фамилии в текстовое окно

При обработке событий щелчка по новой кнопке в сценарии на VBScript осуществляется перехват введенного текста, и размещение его на кнопке (происходит замена названия кнопки). Постоянно осуществляется изменение стиля объектов, что достигается внедрением таблицы стилей в сценарий. Полный текст кодов программы для работы с Web-страницей представлен в листинге 21.

Листинг 21.

<HTML>

<HEAD>

<TITLE>Скрытие объектов</TITLE>

#m1{background-color:Yellow;color:navy;position:absolute;top:35;left:90}

.a1 {position:absolute;top:200;left:290;}

.a2 {position:absolute;top:100;}

.a3 {position:absolute;top:300;left:200;}

.a4 {position:absolute;top:280;left:190;color:Yellow;}

</STYLE>

Sub d1_OnClick

R1.style.visibility="visible"

Ob2.style.visibility="visible"

T1.style.visibility="visible"

Ob1.style.visibility="visible"

B2.style.visibility="hidden"

End Sub

Sub B1_OnClick

if T1.value="" then

Ob2.value="Приложение не готово"

T1.size=40

T1.value="Вы не ввели фамилию"

else

Ob2.value="СПАСИБО, " + T1.value

end if

End Sub

</SCRIPT>

</HEAD>

НАЖМИТЕ НА КНОПКУ И ВЫ УВИДИТЕ РАЗЛИЧНЫЕ ВАРИАНТЫ СКРЫТИЯ ОБЪЕКТОВ

</DIV>

<Input Type=Button Name=B2 ID=d1 Value="Просмотр объектов"

onmouseover="m1.style.visibility='visible'"

onmouseout="m1.style.visibility='hidden'">

Введите свою фамилию<BR>

</DIV>

Посмотреть коды программного приложения

</A>

</BODY>

</HTML>