簡單的浮動面板範例

搜尋

上次更新時間

在此範例中，您會建立指令碼編輯器擴充功能，此擴充功能會建立浮動面板來顯示 JavaScript 程式碼，而此程式碼會在「設計」檢視中為選取的指令碼標記加上底線。指令碼編輯器會在稱為 scriptlayer 的浮動面板中所定義之 HTML 表單的 textarea 元素中，顯示 JavaScript 程式碼。如果您在浮動面板中變更選取的程式碼，此擴充功能會呼叫 updateScript() 函式來儲存您的變更。如果在您叫用指令碼編輯器時並未選取指令碼標記，此擴充功能會在稱為 blanklayer 的浮動面板中顯示 (no script selected)。

您可以藉由建立浮動面板、撰寫 JavaScript 程式碼及建立選單項目，建立此擴充功能。

建立浮動面板

此擴充功能的 HTML 檔案開頭包含標準的文件標頭資訊及 title 標籤，此標籤會將「指令碼編輯器」(Script Editor) 一詞放在浮動面板的標題列中。

建立 HTML 檔案標頭

建立新的空白文件。

輸入以下內容：

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

此擴充功能會定義兩個浮動面板：如果用戶未選取指令碼標記，則會顯示 (no script selected)，否則會顯示為所選的指令碼標記加上底線的 JavaScript 程式碼。下列程式碼會定義這兩個浮動面板，或稱為 blanklayer 和 scriptlayer 的絕對定位 (AP) 元素：

建立兩個浮動面板

在 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>

將檔案儲存為 Configuration/Floaters 資料夾中的 scriptEditor.htm。

這兩個 div 標籤都會使用 style 屬性來指定浮動面板的位置 (absolute)、大小 (width:422px 和 height:181px) 及預設的 visibility 設定 (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 值。下圖顯示 scriptlayer 浮動面板及所選的 JavaScript 程式碼︰

如果所選的節點不是元素，或者不是 script 標籤，則 selectionChanged() 函式會顯示 blanklayer 浮動面板並隱藏 scriptlayer 面板。blanklayer 浮動面板會顯示 (no script selected) 文字，如下圖所示：

新增 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 程式碼，而當 textarea 失去輸入焦點時，就會發生 onBlur 事件。

開啟位在 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; 
} 
 
</script> 
</head>

儲存檔案。

建立選單項目

只將指令碼編輯器程式碼儲存在 Configuration/Floaters 資料夾中是不夠的。您也必須呼叫 dw.setFloaterVisibility('scriptEditor',true) 函式或 dw.toggleFloater('scriptEditor') 函式，以便載入及顯示浮動面板。叫用指令碼編輯器的最明顯位置就是從「視窗」選單，這會定義在 menus.xml 檔案中。您必須建立 menuitem 標籤，此標籤會在「視窗」選單中建立指令碼編輯器擴充功能的項目，如下圖所示：

如果您在目前文件的「設計」檢視中選取指令碼標記，然後選取「指令碼編輯器」選單項目，則 Dreamweaver 會叫用「指令碼編輯器」浮動面板，並顯示為指令碼標記加上底線的 JavaScript 程式碼。如果您在尚未選取指令碼標記時選取此選單項目，則 Dreamweaver 會顯示 blanklayer 面板，其中包含 (no script selected) 文字。

開啟位在 Configuration/Menus 資料夾中的 menus.xml 檔案。
找出開頭為 <menuitem name="Tile _Vertically" 的標籤，並將插入點放在此標籤結尾 /> 的後面。

在新的一行上插入以下內容：

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

儲存檔案。

登入您的帳戶

簡單的浮動面板範例

建立浮動面板

撰寫 JavaScript 程式碼

建立選單項目

詢問社群

聯絡我們