Применение встроенных вариантов поведения JavaScript

Применение встроенных вариантов поведения

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

Хотя действия Dreamweaver были написаны для максимизации кроссбраузерной совместимости, некоторые браузеры вообще не поддерживают JavaScript, и многие пользователи в интернете отключают JavaScript в своих браузерах.Для достижения наилучших кроссплатформенных результатов предоставьте альтернативные интерфейсы, заключенные в теги <noscript>, чтобы люди без JavaScript могли использовать ваш сайт.

Применить поведение «Вызов JavaScript»

Поведение Call JavaScript выполняет пользовательскую функцию или строку кода JavaScript при возникновении события. (Вы можете написать скрипт самостоятельно или использовать код, предоставленный различными свободно доступными JavaScript-библиотеками в Интернете.)

Применение поведения «Изменить свойство»

Используйте поведение Change Property для изменения значения одного из свойств объекта (например, цвета фона div или действия формы).

Применение поведения «Проверка подключаемого модуля»

Используйте поведение Check Plugin для отправки посетителей на разные страницы в зависимости от того, установлен ли у них указанный плагин.Например, вы можете направить посетителей на одну страницу, если у них есть Shockwave, и на другую страницу, если у них его нет.

Применение поведения «Перетаскивание элемента AP»

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

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

Поскольку поведение «Перетащить элемент AP» должно быть вызвано до того, как посетитель сможет перетащить элемент AP, вам следует прикрепить «Перетащить элемент AP» к объекту body (с событием onLoad).

Сбор сведений о перетаскиваемом элементе AP

Когда вы присоединяете поведение «Перетащить AP-элемент» к объекту, Dreamweaver вставляет функцию MM_dragLayer() в раздел head документа. (Функция сохраняет старое соглашение об именовании для AP-элементов [то есть «Layer»], чтобы слои, созданные в предыдущих версиях Dreamweaver, оставались доступными для редактирования.) Помимо регистрации AP-элемента как перетаскиваемого, эта функция определяет три свойства для каждого перетаскиваемого AP-элемента — MM_LEFTRIGHT, MM_UPDOWN и MM_SNAPPED — которые можно использовать в собственных функциях JavaScript для определения относительного горизонтального положения AP-элемента, относительного вертикального положения AP-элемента и того, достиг ли AP-элемент области сброса.

Например, следующая функция отображает значение свойства MM_UPDOWN (текущее вертикальное положение AP-элемента) в поле формы с именем curPosField. (Поля формы полезны для отображения постоянно обновляемой информации, поскольку они динамические — то есть вы можете изменять их содержимое после завершения загрузки страницы.)

function getPos(layerId){

var layerRef = document.getElementById(layerId);

var curVertPos = layerRef.MM_UPDOWN;

document.tracking.curPosField.value = curVertPos;

}

Вместо отображения значений MM_UPDOWN или MM_LEFTRIGHT в поле формы вы можете использовать эти значения разными способами.Например, можно написать функцию, которая отображает сообщение в поле формы в зависимости от того, насколько близко значение к зоне перетаскивания, или можно вызвать другую функцию для показа или скрытия AP-элемента в зависимости от значения.

Особенно полезно считывать свойство MM_SNAPPED, когда на странице есть несколько AP-элементов, все из которых должны достичь своих целей, прежде чем посетитель сможет перейти к следующей странице или задаче. Например, можно написать функцию для подсчета того, сколько AP-элементов имеют значение MM_SNAPPED равное true, и вызывать ее всякий раз, когда AP-элемент отпускается.Когда счетчик привязанных элементов достигнет желаемого числа, можно отправить посетителя на следующую страницу или отобразить поздравительное сообщение.

Применение поведения «Переход к URL-адресу»

Поведение Go To URL открывает новую страницу в текущем окне или в указанном фрейме. Это поведение полезно для изменения содержимого двух или более фреймов одним щелчком.

Применение поведения «Меню переходов»

Когда вы создаете меню перехода с помощью Insert > Form > Jump Menu, Dreamweaver создает объект меню и прикрепляет к нему поведение Jump Menu (или Jump Menu Go). Обычно нет необходимости прикреплять поведение Jump Menu к объекту вручную.

Существующее меню перехода можно редактировать двумя способами:

• Можно редактировать и переставлять элементы меню, изменять файлы для перехода и изменять окно, в котором эти файлы открываются, дважды щелкнув существующее поведение Jump Menu на панели Behaviors.

• Можно редактировать элементы в меню так же, как вы редактируете элементы в любом меню, выбрав меню и используя кнопку List Values в инспекторе свойств.

Применение поведения «Выполнение меню переходов»

Поведение «Переход по меню» тесно связано с поведением «Меню перехода»; «Переход по меню» позволяет связать кнопку «Перейти» с меню перехода.(Перед использованием этого поведения меню перехода уже должно существовать в документе.)Нажатие кнопки «Перейти» открывает ссылку, выбранную в меню перехода.Обычно меню перехода не нуждается в кнопке «Перейти»; выбор элемента из меню перехода обычно приводит к загрузке URL без необходимости дальнейших действий пользователя.Но если посетитель выбирает тот же элемент, который уже выбран в меню перехода, переход не происходит.В целом это не имеет значения, но если меню перехода появляется во фрейме, а элементы меню перехода ссылаются на страницы в других фреймах, кнопка «Перейти» часто полезна, чтобы позволить посетителям повторно выбрать элемент, который уже выбран в меню перехода.

Применение поведения «Открытие окна браузера»

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

Если вы не указываете атрибуты для окна, оно открывается с размером и атрибутами окна, из которого оно было открыто.Указание любого атрибута для окна автоматически отключает все другие атрибуты, которые не включены явно.Например, если вы не устанавливаете атрибуты для окна, оно может открыться размером 1024 x 768 пикселей и иметь панель навигации (показывающую кнопки «Назад», «Вперед», «Главная» и «Обновить»), панель расположения (показывающую URL), строку состояния (показывающую сообщения о состоянии внизу) и строку меню (показывающую меню «Файл», «Редактировать», «Вид» и другие).Если вы явно устанавливаете ширину равной 640, а высоту равной 480 и не устанавливаете другие атрибуты, окно открывается размером 640 x 480 пикселей без панелей инструментов.

Применение поведения «Вывод сообщения»

Поведение «Всплывающее сообщение» отображает предупреждение JavaScript с указанным вами сообщением.Поскольку предупреждения JavaScript имеют только одну кнопку («ОК»), используйте это поведение для предоставления пользователю информации, а не для представления выбора.

Вы можете внедрить любой корректный вызов функции JavaScript, свойство, глобальную переменную или другое выражение в текст.Чтобы внедрить выражение JavaScript, поместите его в фигурные скобки ({}). Чтобы отобразить фигурную скобку, поставьте перед ней обратную косую черту (\{).

Пример.

URL для этой страницы: {window.location}, а сегодня: {new Date()}.

Применение поведения «Предварительная загрузка изображений»

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

Применение поведения «Задать текст фрейма»

Поведение «Задать текст фрейма» позволяет динамически задавать текст фрейма, заменяя содержимое и форматирование фрейма указанным вами содержимым.Контент может включать любой допустимый HTML-код.Используйте данное поведение, чтобы отображать информацию динамически.

Хотя поведение «Задать текст фрейма» заменяет форматирование фрейма, вы можете выбрать «Сохранить цвет фона», чтобы сохранить атрибуты цвета фона страницы и текста.

Вы можете встраивать в текст любой допустимый вызов функции JavaScript, свойство, глобальную переменную или другое выражение.Чтобы встроить выражение JavaScript, заключите его в фигурные скобки ({}).Чтобы отобразить фигурную скобку, поставьте перед ней обратную косую черту (\{).

Пример.

URL данной страницы {window.location}, а сегодня {new Date()}.

Примените поведение «Задать текст контейнера»

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

Вы можете вставлять любые допустимые вызовы функций JavaScript, свойства, глобальные переменные или другие выражения в текст. Чтобы вставить выражение JavaScript, поместите его в фигурные скобки ({}). Чтобы отобразить фигурную скобку, поставьте перед ней обратную косую черту (\{).

Пример.

URL для этой страницы: {window.location}, а сегодня: {new Date()}.

Примените поведение «Задать текст строки состояния»

Поведение «Задать текст строки состояния» отображает сообщение в строке состояния в левом нижнем углу окна браузера. Например, вы можете использовать это поведение для описания назначения ссылки в строке состояния вместо показа связанного с ней URL. Посетители часто игнорируют или не замечают сообщения в строке состояния (и не все браузеры обеспечивают полную поддержку установки текста строки состояния); если ваше сообщение важное, рассмотрите возможность отображения его как всплывающего сообщения или как текста элемента AP.

Вы можете вставлять любые допустимые вызовы функций JavaScript, свойства, глобальные переменные или другие выражения в текст. Чтобы вставить выражение JavaScript, поместите его в фигурные скобки ({}). Чтобы отобразить фигурную скобку, поставьте перед ней обратную косую черту (\{).

Пример.

URL этой страницы — {window.location}, сегодня — {new Date()}.

Примените поведение «Задать текст текстового поля»

Поведение «Задать текст текстового поля» заменяет содержимое текстового поля формы содержимым, которое вы указываете.

Вы можете вставлять любые допустимые вызовы функций JavaScript, свойства, глобальные переменные или другие выражения в текст. Чтобы вставить выражение JavaScript, поместите его в фигурные скобки ({}). Чтобы отобразить фигурную скобку, необходимо указать перед ней символ обратной косой черты (\{).

Пример.

URL для этой страницы: {window.location}, а сегодня: {new Date()}.

Создание именованного текстового поля

Применение «Задать текст текстового поля»

Применение поведения «Показать-скрыть элементы»

Поведение «Показать/скрыть элементы» показывает, скрывает или восстанавливает видимость по умолчанию одного или нескольких элементов страницы. Это поведение полезно для отображения информации при взаимодействии пользователя со страницей. Например, когда пользователь наводит указатель мыши на изображение растения, вы можете показать элемент страницы с подробной информацией о сезоне и регионе роста растения, количестве необходимого солнечного света, размере взрослого растения и так далее. Поведение только показывает или скрывает соответствующий элемент — оно фактически не удаляет элемент из потока страницы, когда он скрыт.

Это поведение устарело начиная с Dreamweaver CS5.

Применение поведения «Замена изображения»

Поведение «Замена изображения» меняет одно изображение на другое путем изменения атрибута src тега <img>.Используйте это поведение для создания эффектов кнопок при наведении и других эффектов изображений (включая одновременную замену более чем одного изображения). Вставка изображения при наведении автоматически добавляет поведение «Замена изображения» на вашу страницу.

Также существует поведение «Восстановить изображение», которое восстанавливает последний набор замененных изображений до их предыдущих исходных файлов. Это поведение автоматически добавляется при прикреплении поведения «Поменять изображение» к объекту; если вы оставите выбранным параметр «Восстановить» при прикреплении «Поменять изображение», вам никогда не потребуется выбирать поведение «Восстановить изображение» вручную.

Использование поведения «Проверить форму»

Поведение «Проверка формы» проверяет содержимое указанных текстовых полей, чтобы убедиться, что пользователь ввел правильный тип данных. Присоедините это поведение к отдельным текстовым полям с событием onBlur, чтобы проверять поля по мере заполнения формы пользователем, или присоедините его к форме с событием onSubmit, чтобы оценить несколько текстовых полей одновременно, когда пользователь нажмет кнопку «Отправить». Присоединение этого поведения к форме предотвращает отправку форм с недопустимыми данными.

Связанные материалы

• Вставка или изменение динамического меню HTML-формы
• Создание фреймов и набора фреймов