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

Введение в Behaviors

  Все выпуски  

Разбор листингов


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

Выпуск 2

Для того, что бы дать Вам возможность поэкспериментировать, сегодняшний выпуск посвящен разбору листингов, приведенных в прошлой рассылке. Я надеюсь, что данный выпуск позволит Вам, хотя бы в небольших масштабах, модифицировать мои примеры, что поможет Вам лучше понять данное направление DHTML. Для тех, кто не читал прошлый выпуск:

  • Архив рассылки (html)
  • Работающий пример(html)
  • Работающий пример (zip)

Первый листинг состоит из одной строчки. Объявление в этой строчке указывает браузеру, что всем изображениям (тегам img), с именем класса, равным my-rollover, присваивается определенный стиль. В описании стиля присутствует только одно свойство - behavior, значением которого, является адрес файла html-компонента.

Фактически данная строка просто указывает положение файла с html-компонентом, который применяется ко всем тегам img, имеющим класс my-rollover. И ничего более.

Следующий листинг как раз и содержит html-компонент (и его имя используется в первом листинге). Как видно из листинга, весь компонент начинается и заканчивается тегом public:component. Этот тег имеет ряд свойств, о роли которых я расскажу в ближайших выпусках. Пока менять этот тег мы не будем.

Сразу за открывающим тегом идет тег public:attach. Единственным назначением этого тега является связывание события с функцией компонента. В нашем примере используются два свойства event и onevent. Первое свойство указывает событие, а второе функцию - обработчик события. Вы можете, ради эксперимента изменять значения свойства event, для того, что бы посмотреть, как изменяется поведение html-компонента.

И последняя часть html-компонента состоит из простого скрипт-блока, хорошо знакомого всем по DHTML. Единственным незнакомым местом здесь является ключевое слово element. Element - это тот объект в html-документе, с которым связано поведение. В нашем случае это тег img. Любой знакомый с DHTML может смело изменять скрипт-блок.

И, наконец, на последнем листинге отображен html-документ. Для нас интересно только две строчки. Первая строчка содержится в заголовке. Это тег link, связывающий файл с таблицей стиля. И тег img, расположенный в теле документа и имеющий класс my-rollover. То о чем говорилось при разборе первого листинга.

В следующем выпуске мы создадим rollover, который будет работать в обе стороны (то есть менять картинку и при наведении, и при сходе мышки с графического элемента), а так же будет позволять настроить картинки для активного и неактивного состояния rollover'а.


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

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

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



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

В избранное