Specifications

ManualsBrandsMACROMEDIA ManualsOtherDREAMWEAVER 8-DREAMWEAVER API

Chapter 340

Adding nodes

To add a node to an existing tree control programmatically, set the innerHTML

property of the

mm:treecontrol tag or one of the existing mm:treenode tags. Setting the inner

HTML

property of a tree node creates a nested node.

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 or 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.

To cause a color picker to appear in the UI, specify

<input type="mmcolorbutton"> in your

extension. You can set the default color for the color picker by setting a value attribute on the

input tag. If no value is set, 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 is changed.

You might want to keep a text box and a color picker synchronized. The following example

creates a text box that synchronizes the color of the text box with the color of the color picker:

<input type = "mmcolorbutton" name="fgcolorPicker"

onChange="document.fgcolorText.value=this.value">

<input type = "test" name="fgcolorText"

onBlur="document.fgColorPicker.value=this.value">

In this example, when the user changes the value of the text box and then tabs or clicks

elsewhere, the color picker updates to show the color that is specified in the text box. Whenever

the user chooses a new color with the color picker, the text box updates to show the hex value for

that color.