MACROMEDIA DREAMWEAVER 8-EXTENDING DREAMWEAVER, Manual

Page: 123 / 504

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.inn ‘<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.
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:
<input type="mmcolorbutton" name="colorbutton" value="#FF0000">
<input type="mmcolorbutton" name="colorbutton" value="teal">
A color button has one event,
onChange
, which is triggered when the color changes.