Пример простой плавающей панели

Поиск
Dreamweaver

Dreamweaver

Открыть приложение

В этом примере создается расширение редактора сценариев, которое образует плавающую панель для отображения кода JavaScript, лежащего в основе выбранного маркера сценария, в представлении «Дизайн». Редактор сценариев отображает код JavaScript в элементе textarea HTML-формы, которая определена в плавающей панели с названием scriptlayer. При внесении изменений в выделенный код в плавающей панели расширение вызывает функцию updateScript() для сохранения изменений. Если при вызове редактора сценариев маркер сценария не выбран, расширение отображает текст (no script selected) в плавающей панели с названием blanklayer.

Данное расширение создается путем создания плавающих панелей, написания кода JavaScript и создания элемента меню.

Создание плавающих панелей

Начало HTML-файла для этого расширения содержит стандартную информацию заголовка документа и тег title, который помещает слова Script Editor в строку заголовка плавающих панелей.

Создание заголовка HTML-файла

  1. Создайте новый пустой документ.

  2. Введите следующее:

     <!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<title>Script Editor</title> 
<script language="JavaScript">

Расширение определяет две плавающие панели, которые отображают текст (no script selected), если пользователь не выбрал маркер сценария, или код JavaScript, лежащий в основе выбранного маркера сценария. Следующий код определяет эти две плавающие панели или элементы с абсолютным позиционированием (AP), называемые blanklayer и scriptlayer.

Создание двух плавающих панелей

  1. Добавьте следующий код после заголовка в HTML-файле:

     <body> 
<div id="blanklayer" style="position:absolute; width:422px; ¬ 
height:181px; z-index:1; left: 8px; top: 11px; ¬ 
visibility: hidden"> 
<center> 
<br> 
<br> 
<br> 
<br> 
<br> 
(no script selected) 
</center> 
</div> 
 
<div id="scriptlayer" style="position:absolute; width:422px; ¬ 
height:181px; z-index:1; left: 8px; top: 11px; ¬ 
visibility: visible"> 
<form name="theForm"> 
<textarea name="scriptCode" cols="80" rows="20" wrap="VIRTUAL" ¬ 
onBlur="updateScript()"></textarea> 
</form> 
</div> 
 
</body> 
</html>

  2. Сохраните файл с именем scriptEditor.htm в папке Configuration/Floaters.

    Оба тега div используют атрибут style для определения положения (absolute), размера (width:422px и height:181px) и настроенного по умолчанию параметра visibility (visible) плавающих панелей. Панель blanklayer использует атрибут center и ряд тегов разрыва (br), чтобы поместить текст в центре панели. Панель scriptlayer создает форму с одним элементом textarea для отображения выбранного кода JavaScript. Тег textarea также указывает, что при возникновении события onBlur, указывающего на то, что выделенный код изменился, функция updateScript() вызывается для записи измененного текста в документе.

Написание кода JavaScript

Код JavaScript для редактора сценариев состоит из одной функции плавающей панели selectionchanged(), которую вызывает Dreamweaver, и одной пользовательской функции updateScript().

selectionChanged(): выбран ли маркер сценария?

Функция selectionChanged() определяет, выбран ли маркер сценария в представлении «Дизайн». Маркер сценария отображается в представлении «Дизайн», если в основном разделе документа присутствует процедура JavaScript и в разделе «Вспомогательные элементы» диалогового окна «Настройки» выбран элемент «Сценарии». На следующем рисунке показан значок маркера сценария:

Значок маркера сценария
Значок маркера сценария

Функция selectionChanged() сначала вызывает функцию dw.getDocumentDOM(), чтобы получить объектную модель (DOM) для пользовательского документа. Затем она вызывает функцию getSelectedNode(), чтобы узнать, является ли выбранный узел для данного документа, во-первых, элементом, а во-вторых, тегом SCRIPT. Если оба этих условия выполняются, функция selectionChanged() делает плавающую панель scripteditor видимой и загружает в нее базовый код JavaScript. Она также задает свойство visibility плавающей панели blanklayer со значением hidden. На следующем рисунке показана плавающая панель scriptlayer с выбранным кодом JavaScript:

Плавающая панель scriptlayer
Плавающая панель scriptlayer

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

Плавающая панель blanklayer
Плавающая панель blanklayer

Добавление функции selectionChanged()

  1. Откройте файл scriptEditor.htm, находящийся в папке Configuration/Floaters.

  2. Введите следующий код в разделе заголовка файла.

     function selectionChanged(){ 
    /* get the selected node */ 
    var theDOM = dw.getDocumentDOM(); 
    var theNode = theDOM.getSelectedNode(); 
     
    /* check to see if the node is a script marker */ 
    if (theNode.nodeType == Node.ELEMENT_NODE && ¬ 
    theNode.tagName == "SCRIPT"){ 
        document.layers['scriptlayer'].visibility = 'visible'; 
        document.layers['scriptlayer'].document.theForm.¬ 
        scriptCode.value = theNode.innerHTML; 
        document.layers['blanklayer'].visibility = 'hidden'; 
    }else{ 
        document.layers['scriptlayer'].visibility = 'hidden'; 
        document.layers['blanklayer'].visibility = 'visible'; 
    } 
}

  3. Сохраните файл.

updateScript(): запись изменений

Функция updateScript() записывает выбранный сценарий при возникновении события onBlur в текстовой области textarea панели scriptlayer. Элемент формы textarea содержит код JavaScript, а событие onBlur возникает, когда textarea теряет фокус ввода.

  1. Откройте файл scriptEditor.htm, находящийся в папке Configuration/Floaters.

  2. Введите следующий код в разделе заголовка файла.

     /* update the document with any changes made by 
    the user in the textarea */ 
 
    function updateScript(){ 
    var theDOM = dw.getDocumentDOM(); 
    var theNode = theDOM.getSelectedNode(); 
    theNode.innerHTML = document.layers['scriptlayer'].document.¬ 
    theForm.scriptCode.value; 
} 
 
</script> 
</head>

  3. Сохраните файл.

Создание элемента меню

Недостаточно просто сохранить код редактора сценариев в папке Configuration/Floaters. Необходимо также вызвать функцию dw.setFloaterVisibility('scriptEditor',true) или dw.toggleFloater('scriptEditor'), чтобы загрузить плавающую панель и сделать ее видимой. Самым очевидным местом, из которого следует вызывать редактор сценариев, является меню «Окно», которое определено в файле menus.xml. Необходимо создать тег menuitem, который создает запись для расширения редактора сценариев в меню «Окно», как показано на рисунке ниже:

Запись для расширения редактора сценариев
Запись для расширения редактора сценариев

Если в представлении «Дизайн» для текущего документа выбран маркер сценария, а затем выбирается элемент меню Script Editor (Редактор сценариев), Dreamweaver вызывает плавающую панель редактора сценариев и отображает код JavaScript, лежащий в основе маркера сценария. Если элемент меню выбирается, когда маркер сценария не был выбран, Dreamweaver отображает панель blanklayer, которая содержит текст (no script selected).

  1. Откройте файл menus.xml, расположенный в папке Configuration/Menus.

  2. Найдите тег, который начинается с выражения <menuitem name="Tile _Vertically", и поместите курсор вставки после закрывающего элемента /> тега.

  3. В новой строке вставьте следующий код:

     <menuitem name="Script Editor" enabled="true" ¬ 
command="dw.toggleFloater('scriptEditor')"¬ 
checked="dw.getFloaterVisibility('scriptEditor')" />

  4. Сохраните файл.

 Adobe

Получайте помощь быстрее и проще

Новый пользователь?

Ссылки быстрого перехода

Просмотреть все свои планы Управление планами
Просмотреть ссылки быстрого доступа
Скрыть ссылки быстрого доступа
Adobe MAX 2024

Adobe MAX
— творческая конференция

С 14 по 16 октября очно в Майами-Бич и онлайн

Зарегистрироваться

Adobe MAX

Творческая конференция

С 14 по 16 октября очно в Майами-Бич и онлайн

Зарегистрироваться
Adobe MAX 2024

Adobe MAX
— творческая конференция

С 14 по 16 октября очно в Майами-Бич и онлайн

Зарегистрироваться

Adobe MAX

Творческая конференция

С 14 по 16 октября очно в Майами-Бич и онлайн

Зарегистрироваться

Правовые уведомления    |    Политика конфиденциальности в сети Интернет