Отправляет email-рассылки с помощью сервиса Sendsay

Введение в Behaviors

Подписаться Бесплатная «Серебряная» новостная рассылка . Подписчиков 618 RSS
←   Февраль 2003   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28


За последние 60 дней ни разу не выходила


Сайт рассылки: http://www.webber.ru
Открыта: 11-11-2002

Автор
Олег Тарабрин

Статистика

618 подписчиков
0 за неделю
←   Все выпуски   →

Выпуск посвящен рассмотрению совместной работы нескольких html-компонентов.


Информационный Канал Subscribe.Ru

Выпуск 9

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

Данные элементы являются, пожалуй, идеальными объектами для демонстрации совместной работы двух html-компонентов. Сегодня мы создадим два простых html-компонента, которые будут изменять вид наших элементов меню. Первый html-компонент будет отвечать за реакцию на события мыши для первого типа элементов, а второй html-компонент- за реакцию для второго типа элементов. Кроме того, мы будем использовать html-компонент my-mouse.htc, созданный в прошлом выпуске. Ниже приведены листинги обоих html-компонентов (my-top-item.htc и my-next-item.htc):

<public:component>
 <public:attach event='onreadystatechange' onevent='event_onreadystatechange()'  />
 <script language='jscript'>
 function event_my_mousein()
 {
  element.style.borderColor = "#FFFFFF #808080 #808080 #FFFFFF";
 }
 function event_my_mouseout()
 {
  element.style.borderColor = "menu";
 }
 function event_onreadystatechange()
 {
  if (element.readyState == "complete")
  {
   element.attachEvent("my_mousein", event_my_mousein);
   element.attachEvent("my_mouseout", event_my_mouseout);
  }
 }
 </script>
</public:component>

my-top-item.htc

<public:component>
 <public:attach event='onreadystatechange' onevent='event_onreadystatechange()'  />
 <script language='jscript'>
 function event_my_mousein()
 {
  element.style.backgroundColor = "highlight";
  element.style.color = "highlighttext"; }
 function event_my_mouseout()
 {
  element.style.backgroundColor = "menu";
  element.style.color = "menutext";
 }
 function event_onreadystatechange()
 {
  if (element.readyState == "complete")
  {
   element.attachEvent("my_mousein", event_my_mousein);
   element.attachEvent("my_mouseout", event_my_mouseout);
  }
 }
 </script>
 </public:component>

my-next-item.htc

Как следует из листинга, в функции event_onreadystatechange назначается обработчики событий my_mousein и my_mouseout. Таких стандартных событий, то есть событий, генерируемых ядром Internet Explorer, не существует. Однако эти события генерируются другим нашим html-компонентом (подробнее смотри Выпуск 8).

Фактически происходит следующее: события мыши onmouseover и onmouseout обрабатываются в html-компоненте my-mouse.htc. В случае, если мышь пересекает границу объекта, данный компонент генерирует уже свои события my_mousein и my_mouseout. Эти события обрабатываются уже в html-компонентах, описанных в данном выпуске.

Эта схема позволяет вынести обработку событий мыши, предназначенную для определения того, произошел ли входи или выход мыши в пределы элемента, в отдельный html-компонент.

Осталось указать, что оба html-компонента, описанные в этом выпуске фактически эквивалентны, и разделены только для демонстрации совместного использования html-компонентов. Оба html-компонента просто в зависимости от событий my_mousein и my_mouseout изменяют стиль элемента. Ниже приведены листинги каскадной таблицы стилей (samp-009.css) и тестового html-документа (samp-009.html), содержащего набор элементов первого и второго типа:

.my-top-item  {behavior: url(my-mouse.htc) url(my-top-item.htc);
               background-color:menu; color:menutext;
               border:1px solid menu;cursor:hand;
               padding:1px 3px 1px 3px;}
 .my-next-item {behavior: url(my-mouse.htc) url(my-next-item.htc);
               background-color:menu; color:menutext;
               border:1px solid menu;cursor:hand;
               padding:1px 3px 1px 3px}
 .my-menu-top  {border:1px solid black; background-color:menu;
               font-family:"times new roman"; font-size:14px}
 .my-menu-next {border:1px solid black; background-color:menu;
               font-family:"times new roman"; font-size:14px}

samp-009.css

<html>
 <head>
  <link rel="stylesheet" href="samp-009.css" type="text/css">
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Пример совместной работы html-компонентов</title>
 </head>
 <body>
  <table class='my-menu-top'>
   <tr><td class='my-top-item'>Первый элемент</td></tr>
   <tr><td class='my-top-item'>Второй элемент</td></tr>
  </table>
  <table class='my-menu-next'>
   <tr><td class='my-next-item'>Первый элемент</td></tr>
   <tr><td class='my-next-item'>Второй элемент</td></tr>
  </table>
 </body>
</html>

samp-009.html

Тексты этих листингов необходимо скопировать в соответствующие файлы (смотри подписи) и поместить в одну директорию. В качестве альтернативы можно использовать архив lesson-09.zip, содержащий все файлы, рассмотренные выпуском. В следующем выпуске мы продолжим создание меню в виде набора поведений.

Архив рассылки

Автор рассылки

P.S. Рассылка создана в первую очередь для читателя, а уже во вторую - что бы потешить самолюбие автора (меня). Так что, если Вам что-то непонятно, или Вы имеете какие-то пожелания, пишите мне.

http://subscribe.ru/
E-mail: ask@subscribe.ru 		Отписаться
Убрать рекламу
В избранное