dreamweaver| Advanced | Tutorial
2.1. Dreamweaver analysis of DOM structure
Dom is the name of document Object model, the tag tree that describes HTML documents, the Dreamweaver Dom is a subset of DOM level 1, Dreamweaver to achieve full customization and extension, Using more than 400 JavaScript programs and providing a complete JavaScript API (Application interface), Dreamweaver 4.0 is now basically able to implement menus, floating panels, code monitors, The Site window and the document window are fully customizable, so we have to have a certain understanding of the Dreamweaver DOM structure, so that we can design the perfect plug-in.
below is a list of the structural highlights of the Dreamweaver Dom
| object |
Properties |
method |
event |
| document |
forms (array)
images (array)
Layers (Array)
Child object name
NodeType
parentnode
childnodes
documentelement
Body
URL
ParentWindow
|
getelementsbytagname ()
//Get specific tag
HasChildNodes ()
//whether there are child nodes |
onload |
| all tag |
nodetype
parentnode
childnodes
TagName
Property name
InnerHTML
outerHTML
|
getattribute ()
//Get Properties
setattribute ()
//Set Properties
RemoveAttribute ()
//delete properties
getElementsByTagName ()
//Get specific tag
HaschilDnodes ()
//whether there are child nodes |
form |
ditto |
  |
2.2. The working mechanism of JavaScript in Plug-ins
dreamweaver in processing plug-ins, compile and execute the code in the <script>, but also compile the external JS file, the external file is through the <script src= "..." ">" It is worth noting that if </script> is interrupted in JavaScript code and is not being executed, it is usually replaced with ' + '/script> ' </script> to ensure that the following code is compiled and executed;
plug-in type different principle:
Objects Class : Returns a string to insert a document, inserts code as needed, or invokes command
Command class : Perform a well-defined operation
Behavior Class : Adds an event to a specific tag and inserts code as needed
If you want users to enter parameters when using Plug-ins, you must design an HTML file with form, and then use JavaScript code to handle the input parameters.
Note: the links on the plugin panel do not work
2.3. The plug-in's dedicated controller
3.1 Color selection button Mmcolorbutton
Color value passed to a specific input box by onchange event
Legend:
Sample:
3.2 file browse box
File navigation box is generally used to select the target file in the station, pass the location of the file through the onclick event, The file path can optionally be relative to site or document
Sample:
3.3 directory tree
Mm:treecontrol indicate that this form element is a directory tree
mm:treecolumn A column that defines a directory tree The
Mm:treenode the node for the directory tree.
Legend:
Sample:
