Adobe Extending Dreamweaver CS4 Manual do Utilizador descarregar pdf (Página 96)

EXTENDING DREAMWEAVER CS4

User interfaces for extensions

Manipulating content within a tree control

Tree controls and the nodes within them are implemented as HTML tags. They are parsed by Dreamweaver and stored

in the document tree. These tags can be manipulated in the same way as any other document node. For more

information on

DOM functions and methods, see “The Dreamweaver Document Object Model” on page 95.

Add a node 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">';

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

Delete a node 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 = "";

Adding a color button control

Color button controls let you add color picker interfaces to your extensions.

In addition to the standard input types such as text, check box, 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 user interface. 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 gray 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.

Keep a text box and the 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">

1 2 ... 91 92 93 94 95 96 97 98 99 100 101 ... 386 387

Sem comentários

Adobe Extending Dreamweaver CS4 Manual do Utilizador Página 96