Tutorial/dreamweaver/advanced Deep Dreamweaver Plugin mysteries (2)

Source: Internet
Author: User
Tags array object model window dreamweaver
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:

     
        
        
        
    






Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.