Dreamweaver| Advanced | tutorials
3. Command Plug-in Writing
1. Introduction to command plugin
The command command is powerful enough to manipulate the current document, all open documents, and even the HTML documents on all the drives to insert, delete, rearrange the properties of all HTML tags, and handle annotations and text, among other powerful features.
2. How the command plug-in works
The action flow of the command plug-in is as follows:
| 1 |
If the Canacceptcommand () function is defined, Dreamweaver invokes to detect whether the selected content is appropriate for this command, if Canacceptcommand () returns FALSE, Then the corresponding menu item in the Dreamweaver command menu is grayed out to indicate that the command is not appropriate to execute |
| 2 |
The user selects a command order, or calls it through the Dw.runcommand () function |
| 3 |
If the receivearguments () function is defined, it is invoked to handle the parameters entered by the user |
| 4 |
If you define the CommandButtons () function, call it, display a specific button, and give each button a specific execution code |
| 5 |
Dreamweaver detects if a form tag exists in the command code and, if it exists, first calls the Windowdimensions () function, evaluates the dimensions of the parameter selection dialog box, if Windowdimensions () is not defined, Dreamweaver automatically defines the dimensions of the dialog box, and the last pop-up parameter dialog box |
| 6 |
If the onload handle exists in the label, Dreamweaver executes it, but if there is no dialog box, this step does not execute |
| 7 |
User Selection parameters |
| 8 |
When the user clicks a specific button, Dreamweaver executes the command code assigned to the corresponding button |
3. Command Plug-in production example
After familiar with the operation of the command plug-in, we can also develop our own command plugin!
Example 3: A command plugin that flashes in the status bar is written
Ex3.1 specific effect is the appearance of the status bar on this page, the specific JavaScript code is as follows
Ex3.2 Code Analysis
First, to determine the user customization parameters, the user needs to customize the parameters are:
1, Flashmsg, is the status bar display text;
2, speed, is the blink speed, unit millisecond;
Second, we found that there is a Window.onload=flash event that we have to add the Onload=flash () event to the body tag of the page
Ex3.3 began to design
Ex3.3.1 Design Flash message.htm file
The task of this document is to pass two parameters: a text parameter and a time parameter, so you need a form tag, two input input boxes, the specific code is as follows:
!--Comment: Plug-in name-->
Flash message
!--command plug-in's JavaScript function-->
!--Note: form--> for parameter passing
| display string: |
!--Note: string input box-->
|
| flashing speed: |
!--Note: Flashing speed input box-->
(unit: milliseconds) |
!--notes: Copyright bar-->
|
Ex3.3.2 Design Flash message.js file
The task of this document is to accept the user's parameters, insert a section of JavaScript code, and then add the Onload=flash () event to the body tag
The specific code is as follows:
Comments: Plugin Dialog button settings, and give each button a specific executive function
function CommandButtons () {
return new Array (OK, "Putredin ()", "Cancel", "Window.close ()")
}
Note: The execution function of the button "OK"
function Putredin () {
Insertonload ();
Insertredscript ();
Window.close ();
}
Remarks: Performing a function that inserts JavaScript
function Insertredscript () {
var msg= "\" "+ Document.theForm.myMsg.value +" "";
var Speed=document.theform.myspeed.value;
var redscript= "//flash message by Redidea \ r";
redscript+= "var flashmsg =" + Msg + "; \ r";
redscript+= "var speed =" + Speed + "; \ r ";
redscript+= "var control = 1; \ r ";
redscript+= "function Flash () {\ r";
redscript+= "if (Control = = 1) \ r";
redscript+= "{\ r";
redscript+= "window.status=" + Msg + "; \ r";
redscript+= "control=0;\r";
redscript+= "} \ r";
redscript+= "else \ R";
redscript+= "{\ r";
redscript+= "Window.status=\"; \ r ";
redscript+= "control=1; \ r ";
redscript+= "}\r";
redscript+= "settimeout (" flash () \ "," + Speed + "); \ r ";
redscript+= "} \ r";
Note: Get insert location of JavaScript code
Redpagedom=dreamweaver.getdocumentdom ("document");
Thescriptnodes=redpagedom.getelementsbytagname ("SCRIPT");
Redheadnode=redpagedom.getelementsbytagname ("Head");
Isthere=redheadnode.item (0). Innerhtml.indexof ("Flash message by Redidea")!= "-1";
if (Isthere)
{
}
else{
if (thescriptnodes== "")
{
Redheadnode.item (0). Innerhtml=redheadnode.item (0). innerhtml+ "<script language=\" javascript\ "> \ r" +RedScript+ "\r< /S "+" cript> ";
}
else{
Thescriptnodes.item (0). Innerhtml=thescriptnodes.item (0). innerhtml+redscript+ "\ r";
}
}
}
Remarks: Set event handles for specific objects
function SetHandler (Obj,eventname,fncall, optstr) {
var eventstr,fnname,fnarray=new Array (), i=0;
Eventstr = Obj.getattribute (eventName);
if (EVENTSTR) {
FnName = fncall.substring (0,fncall.indexof ("("));
Fnarray = Dreamweaver.gettokens (Eventstr, ";");
for (i; i<fnarray.length; i++)
if (Fnarray[i].indexof (fnname+ ')!=-1 && (!optstr | |
Fnarray[i].indexof (OPTSTR)!=-1)) break;
}
if (fnarray.length>0 && i==fnarray.length && fnarray[i-1].tolowercase (). IndexOf ("return") ==0) {
Fnarray[i] = fnarray[i-1];
i--;
}
Fnarray[i] = Fncall;
Obj.setattribute (Eventname,fnarray.join (";"));
return True
}
Note: Assign the OnLoad event to the body tag
function Insertonload () {
var Add;
var bodynode = dreamweaver.getdocumentdom (' document '). Body;
SetHandler (Bodynode, "onload", addonload);
}
4. Command Plug-in writing considerations
1, all future inserted code, must be in the JS file with a function into a string, and then return, with the button triggered function inserted into the current document;
2, command commands loaded into the Dreamweaver, will be found in the Command menu;
3, the other method is to make the object plug-in, and then through the Dreamweaver.popupcommand () function call has been prepared command
5. command frequently used functions list
CommandButtons ()//Define Command Dialog Box button
Canacceptcommand ()//Rules the object that can accept command
Initializeui ()//Initialize user interface
Windowdimensions ()//define the dimensions of the Parameters dialog box
SetHandler (Obj,eventname,fncall, OPTSTR)//Set event handle for a specific object
