html插入浮动面板,Dreamweaver 中简单的浮动面板示例

在此示例中，您将创建一个脚本编辑器扩展，以通过创建浮动面板显示设计视图中选定脚本标记对应的 JavaScript 代码。脚本编辑器会显示在名为 scriptlayer 的浮动面板中定义的 HTML 表单的 textarea 元素中的 JavaScript 代码。如果您更改了浮动面板中的选定代码，此扩展将调用 updateScript 函数以保存您的更改。如果您在调用脚本编辑器时未选择脚本标记，则此扩展将在名为 blanklayer 的浮动面板中显示 (no script selected)。

您可通过创建浮动面板、编写 JavaScript 代码并创建菜单项来创建此扩展。

创建浮动面板

此扩展的 HTML 文件的开头包含标准文档标头信息和一个标题标签，该标签会将单词“Script Editor”置于浮动面板的标题栏中。

创建 HTML 文件标头

创建新的空白文档。

输入以下内容：

Script Editor

此扩展定义两个浮动面板，它们会显示 (no script selected)(如果用户尚未选择脚本标记)或选定脚本标记对应的 JavaScript 代码。以下代码会定义这两个浮动面板或绝对定位的 (AP) 元素(名为 blanklayer 和 scriptlayer)：

创建两个浮动面板

在 HTML 文件中的标头后面添加以下代码：

(no script selected)

onBlur="updateScript()">

将此文件以 scriptEditor.htm 形式保存在 Configuration/Floaters 文件夹中。

div 标签使用 style 属性指定浮动面板的位置 (absolute)、大小(width:422px 和 height:181px)和默认可见性设置 (visible)。blanklayer 面板使用 center 属性和一系列换行符 (br) 标签将文本置于面板中心位置。scriptlayer 面板通过创建具有单一 textarea 的表单显示选定 JavaScript 代码。textarea 标签还指定当 onBlur 事件发生时(这表示选定代码已发生更改)，调用 updateScript() 函数以将更改后的文本写回文档。

编写 JavaScript 代码

脚本编辑器的 JavaScript 代码包含 Dreamweaver 调用的一个浮动面板函数 selectionchanged() 和一个用户定义的函数 updateScript()。

selectionChanged()：是否选择了脚本标记？

selectionChanged() 函数确定是否已在设计视图中选择脚本标记。如果文档的正文部分中有 JavaScript 例程且如果在“首选参数”对话框的“不可见元素”部分中选择了“脚本”，则脚本标记将出现在设计视图中。下图展示了一个脚本标记图标：

脚本标记图标

selectionChanged() 函数会先调用 dw.getDocumentDOM() 函数以获取用户文档的文档对象模型 (DOM)。然后，它会调用 getSelectedNode() 函数以了解为文档选择的节点是否为元素以及是否为 SCRIPT 标签。如果满足这两个条件，则 selectionChanged() 函数会使 scripteditor 浮动面板可见并使用基本 JavaScript 代码进行加载。它还会将 blanklayer 浮动面板的 visibility 属性设置为值 hidden。下图展示了包含选定 JavaScript 代码的 scriptlayer 浮动面板：

scriptlayer 浮动面板

如果选定节点不是元素，或不是脚本标签，则 selectionChanged() 函数将使 blanklayer 浮动面板可见并隐藏 scriptlayer 面板。blanklayer 浮动面板会显示文本 (no script selected)，如下图所示：

blanklayer 浮动面板

添加 selectionChanged() 函数

打开 Configuration/Floaters 文件夹中的 scriptEditor.htm 文件。

在文件的标头部分中输入以下代码。

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';

}

}

保存此文件。

updateScript()：写回更改

在 scriptlayer 面板的 textarea 中出现 onBlur 事件时，updateScript() 函数会写回选定脚本。textarea 表单元素包含 JavaScript 代码，并且 onBlur 事件会在 textarea 丢失输入焦点时出现。

打开 Configuration/Floaters 文件夹中的 scriptEditor.htm 文件。

在文件的标头部分中输入以下代码。

/* 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;

}

保存此文件。

创建菜单项

仅仅将脚本编辑器代码保存在 Configuration/Floaters 文件夹中是不够的。您还必须调用 dw.setFloaterVisibility('scriptEditor',true) 函数或 dw.toggleFloater('scriptEditor') 函数，才能加载浮动面板并使其可见。通常会从“窗口”菜单调用脚本编辑器(如 menus.xml 文件中所定义)。您需要创建一个 menuitem 标签，并通过此标签在“窗口”菜单上为脚本编辑器扩展创建条目，如下图所示：

脚本编辑器扩展的条目

如果您在设计视图中为当前文档选择一个脚本标记，然后选择脚本编辑器菜单项，则 Dreamweaver 将调用脚本编辑器浮动面板并显示脚本标记对应的 JavaScript 代码。如果您在未选择脚本标记时选择此菜单项，则 Dreamweaver 将显示包含文本 (no script selected) 的 blanklayer 面板。

打开 Configuration/Menus 文件夹中的 menus.xml 文件。

找到以 之后。

在新行上，插入以下内容：

command="dw.toggleFloater('scriptEditor')"¬

checked="dw.getFloaterVisibility('scriptEditor')" />

保存此文件。