13. Инструменты Dreamweaver для JavaScript
В Dreamweaver CS3 имеется библиотека скриптов под названием Spry effects (активные эффекты). Spry-эффекты могут изменять прозрачность элемента, его положение, масштаб, изменять CSS-свойства. Вы можете создавать интересные визуальные эффекты комбинируя два и более свойств.
Обработчик события вызывает функции, которые находятся в JavaScript-файле. Когда вы добавляете поведение элементу с помощью панели «Behaviors», Dreamweaver автоматически создаёт папку SpryAssets в вашем сайте, сохраняет в ней файл SpryEffects.js и подключает его к вашей странице. Кроме того описание функции добавляется на страницу.
Эффект Appear/Fade (появляться/исчезать)
Для того, чтобы применить эффект к элементу, он должен быть выделен в текущий момент, или иметь идентификатор.
(Не обязательно) Выделите элемент, к которому вы хотите применить эффект.
В панели Behaviors (Window > Behaviors) щёлкните по кнопке и выберите в меню Effects > Appear/Fade. Появится диалоговое окно (рис.1).
Рис. 1. Диалоговое окно эффекта Appear/Fade
Выберите идентификатор нужного элемента в меню элементов Target Element. Если вы уже выделили элемент, выберите <Current Selection> (текущее выделение).
В поле Effect Duration (длительность эффекта) задайте длительность эффекта в миллисекундах.
Выберите эффект, который вы хотите применить: Fade (исчезать) или Appear (появляться).
В поле Fade From задайте процент непрозрачности, который вы хотите в начале эффекта.
В поле Fade To задайте процент непрозрачности, до которого элемент должен исчезнуть.
Выберите Toggle Effect (переключение), если вы хотите, чтобы эффект был обратимым, идущим от прозрачного к видимому и обратно от видимого к прозрачному при последовательных щелчках.
В
панели поведения Behaviors появится строка
с событием и его обработчиком:
Задание 1
Поставьте на странице три картинки, по щелчку на которых они должны:
первая — постепенно исчезать;
вторая — мгновенно исчезать;
третья — становиться полупрозрачной.
В HTML-элементе прописывается событие onclick="MM_effectAppearFade(this, 1000, 100, 0, false)" Нетрудно догадаться, что первый аргумент функции — элемент, который будет изменяться, второй — длительность изменения, третий — начальный процент непрозрачности, четвёртый — конечный процент непрозрачности, пятый — переключение.
Редактирование поведения элемента в панели Behaviors
В панели поведения Behaviors можно легко менять событие и редактировать обработчик события. Для смены события нужно щёлкнуть на нём левой кнопкой мыши и в меню выбрать новое событие.
Задание 2
Измените поведение картинок из предыдущего задания так, чтобы они реагировали не на щелчок, а на наведение мыши.
Для редактирования обработчика нужно щёлкнуть на нём правой кнопкой мыши и в меню выбрать Edit Behavior. Появится диалоговое окно (см. рис.1), в котором можно изменить настройки.
Задание 3
Измените поведение трёх картинок из предыдущего задания так, чтобы они одинаково становились полупрозрачными за 2 секунды.
Изменение другого элемента
В предыдущих заданиях элемент реагировал на событие и сам изменялся. Теперь сделаем так, чтобы элемент реагировал на событие, но изменял не себя, а другой элемент. Для этого в том элементе, который будет меняться, нужно вставить идентификатор. В диалоговом окне (см. рис.1) выберите элемент с нужным идентификатором в меню элементов Target Element.
Задание 4
Поставьте одну картинку и рядом две кнопки: «Скрыть» и «Показать». Первая кнопка должна скрывать картинку, а вторая — показывать.
Оформление активных и неактивных кнопок
Когда на сайте используются сложные веб-технологии, он содержит много инструментов и кнопок разного назначения. Часто бывает, что кнопка в данный момент не активная, то есть при щелчке на ней ничего не происходит. Так, например, в предыдущем задании при яркой картинке кнопка “Скрыть” активна, потому, что она в данный момент может скрыть картинку. Противоположная ей кнопка “Показать” не активна, потому что картинка и так в данный момент яркая и при щелчке на кнопке ничего не происходит. Чтобы пользователю было понятнее, неактивные в данный момент кнопки делают бледными, а активные — яркими..
В
предыдущих заданиях по щелчку на кнопке
менялся только один элемент: он сам или
другой. Теперь по этому же щелчку должен
меняться не только элемент, но и сама
кнопка, и противоположная ей кнопка. В
панели поведения появится три строчки
с одинаковыми событиями, но обработчики
будут настроены на разные элементы:
Задание 5
В предыдущем задании доработайте кнопки так, чтобы при щелчке на кнопке она бледнела до 20%, а противоположная кнопка становилась яркой.
Проанализируем задание. Кнопка по щелчку должна менять три элемента: параграф с текстом, саму себя и противоположную кнопку.
Событие загрузки документа onload
После загрузки страницы все кнопки яркие, включая неактивные. И только после первого щелчка неактивная кнопка бледнеет. Чтобы после загрузки страницы неактивная кнопка была бледная, можно тегу body добавить событие onload
Задание 6
Сделайте так, чтобы неактивные кнопки сразу после загрузки были бледными.
Мы изучили только один эффект Appear/Fade (появляться/исчезать) из библиотеки скриптов Dreamweaver, но порядок применения всех их аналогичен. Вы можете самостоятельно попробовать на практике эффекты, приведённые ниже.
Spry-эффекты включают в себя следующие:
Appear/Fade (появляться/исчезать) делает элемент видимым или опять невидимым. Highlight (выделять) изменяет цвет фона элемента. Blind Up/Down (поднятие/опускание занавеси) имитирует оконную занавесь, которая поднимается или опускается, чтобы скрыть или показать элемент. Slide Up/Down (сдвиг вверх/вниз) перемещает элемент вверх или вниз. Grow/Shrink (рост/сжатие) увеличивает или сокращает размеры элемента. Shake (трясти) имитирует тряску элемента слева направо. Squish (расплющивать) делает элемент исчезающим в верхний левый угол страницы.