Использование вариантов поведения JavaScript (общие инструкции)

Последнее обновление 27 апр. 2021 г.

Используйте поведения JavaScript в Adobe Dreamweaver для размещения кода JavaScript в документах, чтобы посетители могли изменять веб-страницу или инициировать определенные задачи.

Поведение Adobe Dreamweaver помещает код JavaScript в документы, чтобы посетители могли менять оформление веб-страницы или запускать определенные задачи. Поведение — это комбинация события и действия, инициированного при возникновении этого события. На панели «Поведение» на страницу можно добавить поведение, определив действие и затем событие, которое инициирует это действие.

Примечание

Код поведения — это клиентский код JavaScript, то есть он выполняется в браузерах, а не на серверах.

События — это сообщения, генерируемые браузерами, указывающие на то, что посетитель вашей страницы что-то сделал. Например, когда посетитель наводит указатель на ссылку, браузер генерирует событие onMouseOver для этой ссылки; затем браузер проверяет, должен ли он вызвать какой-либо код JavaScript (указанный на просматриваемой странице) в ответ. Различные события определены для разных элементов страницы; например, в большинстве браузеров onMouseOver и onClick — это события, связанные со ссылками, тогда как onLoad — это событие, связанное с изображениями и с разделом body документа.

Действие — это предварительно написанный код JavaScript для выполнения задачи, например открытия окна браузера, показа или скрытия элемента AP, воспроизведения звука или остановки фильма Adobe Shockwave. Действия, предоставляемые с Dreamweaver, обеспечивают максимальную совместимость между браузерами.

После прикрепления поведения к элементу страницы поведение вызывает действие (код JavaScript), связанное с событием, всякий раз, когда это событие происходит для данного элемента. (События, которые можно использовать для запуска данного действия, различаются от браузера к браузеру.) Например, если вы привяжете действие Popup Message к ссылке и укажете, что оно будет запускаться событием onMouseOver, то ваше сообщение будет появляться каждый раз, когда кто-то наводит указатель на эту ссылку.

Одно событие может запускать несколько различных действий, и вы можете указать порядок, в котором эти действия происходят.

Dreamweaver предоставляет около двух десятков действий; дополнительные действия можно найти на веб-сайте Exchange по адресу www.adobe.com/go/dreamweaver_exchange, а также на сайтах сторонних разработчиков. Вы можете написать собственные действия, если хорошо владеете JavaScript.

Примечание

Термины поведение и действие относятся к Dreamweaver, а не HTML. С точки зрения браузера действие — это то же самое, что и любой другой фрагмент кода JavaScript.

Обзор панели «Поведение»

Используйте панель «Поведения» (Окно > Поведения) для прикрепления поведений к элементам страницы (точнее к тегам) и для изменения параметров ранее прикрепленных поведений.

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

Панель «Поведение» содержит следующие параметры.

Показать заданные события

Отображает только те события, которые были прикреплены к текущему документу. События сгруппированы в клиентские и серверные категории. События каждой категории находятся в сворачиваемом списке. Show Set Events является представлением по умолчанию.

Показать все события

Отображает алфавитный список всех событий для данной категории.

Добавить поведение (+)

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

Удалить событие (–)

Удаляет выбранное событие и действие из списка вариантов поведения.

Кнопки со стрелками вверх и вниз

Переместите выбранное действие вверх или вниз по списку поведений для конкретного события.Вы можете изменить порядок действий только для определенного события — например, можно изменить порядок, в котором выполняется несколько действий для события onLoad, но все действия onLoad остаются вместе в списке поведений. Кнопки стрелок отключены для действий, которые нельзя переместить вверх или вниз в списке.

События

Отображает всплывающее меню, видимое только тогда, когда выбрано какое-либо событие, инициирующее действие (это меню появляется при нажатии кнопки рядом с именем выбранного события). В зависимости от выбранного объекта появляются различные события. Если ожидаемые события не появляются, необходимо убедиться, что элемент страницы или тег выбраны верно. (Чтобы выбрать определенный тег, необходимо использовать селектор тегов в левом нижнем углу окна «Документ».)

Примечание

Имена событий в круглых скобках доступны только для ссылок; выбор одного из этих имен событий автоматически добавляет пустую ссылку к выбранному элементу страницы и назначает поведение ей, а не элементу непосредственно. Пустая ссылка указывается в коде HTML как href="javascript:;".

О событиях

Каждый браузер предоставляет набор событий, которые можно связать с действиями, перечисленными в меню «Действия (+)» панели «Поведение». Когда посетитель вашей веб-страницы взаимодействует со страницей — например, щелкая по изображению — браузер генерирует события; эти события можно использовать для вызова функций JavaScript, которые выполняют действие.Dreamweaver предоставляет много распространенных действий, которые можно запускать с помощью этих событий.

Имена и описания событий, предоставляемых каждым браузером, см. в центре поддержки Dreamweaver по адресу www.adobe.com/go/dreamweaver_support.

В меню «События» отображаются разные события в зависимости от выбранного объекта. Чтобы узнать, какие события поддерживает конкретный браузер для конкретного элемента страницы, вставьте элемент страницы в документ и прикрепите к нему поведение, затем откройте меню «События» в панели «Поведение».(По умолчанию события берутся из списка событий HTML 4.01 и поддерживаются большинством современных браузеров.) События могут быть отключены (затемнены), если соответствующие объекты еще не существуют на странице или если выбранный объект не может получать события. Если ожидаемые события не отображаются, убедитесь, что выбран правильный объект.

Если вы прикрепляете поведение к изображению, некоторые события (например, onMouseOver) отображаются в скобках. Эти события доступны только для ссылок. Когда вы выбираете одно из них, Dreamweaver оборачивает тег <a> вокруг изображения, чтобы определить пустую ссылку. Пустая ссылка представлена значением javascript:; в поле «Ссылка» инспектора свойств. Можно изменить значение ссылки, если хотите превратить ее в реальную ссылку на другую страницу, но если удалите JavaScript-ссылку, не заменив ее другой ссылкой, вы удалите поведение.

Чтобы узнать, какие теги можно использовать с конкретным событием в конкретном браузере, найдите событие в одном из файлов в папке Dreamweaver/Configuration/Behaviors/Events.

Применение поведения

Можно прикреплять поведения ко всему документу (то есть к тегу <body>) или к ссылкам, изображениям, элементам форм и нескольким другим элементам HTML.

Выбранный целевой браузер определяет, какие события поддерживаются для конкретного элемента.

Можно указать более одного действия для каждого события. Действия выполняются в порядке, в котором они перечислены в столбце «Действия» панели «Поведение», но этот порядок можно изменить.

Выберите элемент на странице, например изображение или ссылку.

Чтобы прикрепить поведение ко всей странице, нажмите тег <body> в селекторе тегов в левом нижнем углу окна документа.

Выберите «Окно» > «Поведение».
Нажмите кнопку «Плюс (+)» и выберите действие из меню «Добавить поведение».

Действия, которые недоступны в меню, не могут быть выбраны. Они могут быть затемнены, поскольку необходимый объект не существует в текущем документе. Например, действие Control Shockwave или SWF затемнено, если документ не содержит файлы Shockwave или SWF.

При выборе действия появляется диалоговое окно с параметрами и инструкциями для данного действия.

Введите параметры для действия и нажмите кнопку «ОК».

Все действия, предоставляемые Dreamweaver, поддерживаются в современных браузерах. Некоторые действия не поддерживаются в ранних версиях браузеров, однако они не вызывают ошибок.

Примечание

Требуемым объектам необходим уникальный идентификатор. Например, если необходимо применить поведение «Замена изображений» к изображению, то этому изображению требуется идентификатор. Если идентификатор не указан для элемента, Dreamweaver сделает это автоматически.

Событие по умолчанию для запуска действия отображается в колонке «События». Если это не то событие-триггер, которое вам нужно, выберите другое событие из всплывающего меню «События». (Чтобы открыть меню «События», выберите событие или действие в панели «Поведения» и нажмите направленную вниз черную стрелку, которая появляется между именем события и именем действия.)

Изменение или удаление поведения

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

Выберите объект с назначенным ему поведением.
Выберите «Окно» > «Поведение».
Сделайте необходимые изменения.
  • Чтобы редактировать параметры действия, дважды нажмите на его имя или выберите его и нажмите Enter (Windows) или Return (Macintosh); затем измените параметры в диалоговом окне и нажмите OK.

  • Чтобы изменить порядок действий для данного события, выберите действие и нажмите стрелку вверх или вниз. Кроме того, вы можете выбрать действие, вырезать и вставить его в нужное место среди других действий.

  • Чтобы удалить поведение, выберите его и нажмите кнопку «Минус» (–) или нажмите DELETE.

Обновление поведения

Выберите элемент, к которому прикреплено поведение.
Выберите «Окно» > «Поведения» и дважды нажмите на поведение.
Внесите изменения и нажмите OK в диалоговом окне поведения.

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

Загрузить и установить сторонние поведения

Множество расширений доступно на сайте Exchange для Dreamweaver (www.adobe.com/go/dreamweaver_exchange).

Выберите «Окно» > «Поведения» и выберите «Получить больше поведений» из меню «Добавить поведение».

Откроется основной браузер и загрузится сайт Exchange.

Обзор и поиск пакетов.
Загрузите и установите желаемый пакет расширения.

Дополнительные сведения см. в Добавление и управление расширениями в Dreamweaver.