Macromedia dreamweaver 8-extending dreamweaver 사용자 설명서

Using custom UI controls in extensions

123

The following example adds a node to the top level of a tree:

var tree = document.myTreeControl;
//add a top-level node to the bottom of the tree
tree.innerHTML = tree.innerHTML + ‘<mm:treenode name="node3"¬

value="node3">’;

Adding a child node

To add a child node to the currently selected node set the

innerHTML

property of the selected node.

The following example adds a child node to the currently selected node:

var tree = document.myTreeControl;
var selNode = tree.selectedNodes[0];
//deselect the node, so we can select the new one
selnode.removeAttribute("selected");
//add the new node to the top of the selected node’s children
selNode.innerHTML = '<mm:treenode name="item10" value="New item11" ¬

expanded selected>' + selNode.innerHTML;

Deleting nodes

To delete the currently selected node from the document structure, use the

innerHTML

outerHTML

properties.

The following example deletes the entire selected node and any children:

var tree = document.myTreeControl;
var selNode = tree.selectedNodes[0];
selNode.outerHTML = "";

A color button control for extensions

In addition to the standard input types such as text, checkbox, and button, Dreamweaver
supports

mmcolorbutton

, an additional input type in extensions.

Specifying

<input type=

"mmcolorbutton">

in your code causes a color picker to appear in

the UI. You can set the default color for the color picker by setting a value attribute on the
input tag. If you do not set a value, the color picker appears grey by default and the value
property of the input object returns an empty string.

The following example shows a valid

mmcolorbutton

tag:

A color button has one event,

onChange

, which is triggered when the color changes.