当前页面位置: » 丰搜网 » 文档中心 » 详细内容
教程/dreamweaver/高级 深入dreamweaver插件的奥秘(5)
3．command插件的编写
1. command插件的简介
command命令的功能相当强大，可以操作当前文档、所有打开的文档，甚至于所有驱动器上的html文档，可以插入、删除、重排所有的html标签的属性，以及处理注释和文本等等强大功能。
2．command插件的工作原理
command插件的作用流程如下:
| 1 | 如果定义了canacceptcommand()函数，dreamweaver就调用，检测所选择的内容是否适合这个command，如果canacceptcommand()返回false，那么dreamweaver的command菜单里的对应菜单项是灰色的，表示不适合执行这个command |
| 2 | 用户选择某command命令，或者通过dw.runcommand()函数调用 |
| 3 | 如果定义了receivearguments()函数，就调用它，处理用户输入的参数 |
| 4 | 如果定义了commandbuttons()函数，就调用它，显示特定的按钮，并且赋予每个按钮特定的执行代码 |
| 5 | dreamweaver检测command代码里是否存在form标签，如果存在，首先调用windowdimensions()函数，计算参数选择对话框的尺寸，如果windowdimensions()没有定义，dreamweaver自动定义对话框的尺寸；最后弹出参数对话框 |
| 6 | 如果＜body＞标签中存在onload句柄，dreamweaver就执行它，当然如果没有对话框，这一步不执行 |
| 7 | 用户选择参数 |
| 8 | 用户点击特定的按钮时，dreamweaver执行赋予相应按钮的command代码 |
3．command插件制作实例
在熟悉command插件的工作原理后，我们也可以开发自己的command插件了！
example 3:一个状态栏闪烁的command插件编写
ex3.1 具体的效果就是本页状态栏的样子，具体javascript代码如下
＜script language="javascript"＞
＜!--
var flashmsg = "command插件编写实战";
var speed = 700;
var control = 1;
function flash()
{
if (control == 1)
{
window.status=flashmsg;
control=0;
}
else
{
window.status="";
control=1;
}
settimeout("flash()",speed);
}
window.onload=flash;
// --＞
＜/script＞
ex3.2 代码分析
首先，确定用户定制参数,用户需要定制的参数有：
1、flashmsg，就是状态栏的显示文本；
2、speed，就是闪烁速度，单位毫秒;
其次，我们发现有一个window.onload=flash事件，我们必须在网页的body标签中加上onload=flash()事件
ex3.3 开始设计
ex3.3.1 设计flash message.htm文件
本文件要完成的任务是传递两个参数：一个文本参数和一个时间参数，所以需要一个form标签，两个input输入框，具体代码如下：
＜html＞
＜head＞
＜!--注释：插件名称--＞
＜title＞flash message＜/title＞
＜meta http-equiv="content-type" content="text/html; charset=gb2312"＞
＜!--command插件的javascript函数--＞
＜script src="flashnav.js"＞＜/script＞
＜/head＞
＜body＞
＜!--注释：用于参数传递的form--＞
＜form name="theform" method="post" action=""＞
＜table width="300" border="0" cellspacing="0" cellpadding="0"＞
＜tr＞
＜td width="81"＞显示字符串：＜/td＞
＜td width="169"＞
＜!--注释：字符串输入框--＞
＜input type="text" name="mymsg" size="30"＞
＜/td＞
＜/tr＞
＜tr＞
＜td width="81"＞闪烁速度：＜/td＞
＜td width="169"＞
＜!--注释：闪烁速度输入框--＞
＜input type="text" name="myspeed" size="6"＞
(单位：毫秒) ＜/td＞
＜/tr＞
＜tr align="right"＞
＜td colspan="2"＞
＜hr noshade width="100%" size="2"＞
＜!--注释：版权栏--＞
＜font face="verdana, arial, helvetica, sans-serif" size="2"＞2001.1.15
design by redidea
email:redidea@hotmail.com＜/font＞＜/td＞
＜/tr＞
＜/table＞
＜/form＞
＜/body＞
＜/html＞
ex3.3.2 设计flash message.js文件
本文件要完成的任务是：接受用户的参数，插入一段javascript代码，然后给body标签加上onload=flash()事件
具体代码如下：
//注释：插件对话框按钮设置，并且赋予每个按钮特定的执行函数
function commandbuttons(){
return new array("确定","putredin()","取消","window.close()")
}
//注释：按钮"确定"的执行函数
function putredin(){
insertonload();
insertredscript();
window.close();
}
//注释：执行插入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";
//注释：获得javascript代码的插入位置
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";
}
}
}
//注释：设置特定对象的事件句柄
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
}
//注释：将onload事件赋予body标签
function insertonload(){
var addonload="flash()";
var bodynode = dreamweaver.getdocumentdom('document').body;
sethandler(bodynode,"onload",addonload);
}
4． command插件的编写注意事项
1、所有将来插入的代码，都必须在js文件里用函数转化为字符串，然后返回，用按钮触发的函数插入到当前文档；
2、command命令装入dreamweaver后，会在command菜单里找到；
3、另外一种方法是，做成object插件，然后通过dreamweaver.popupcommand()函数调用已经编好的command
5．command常用函数列表
commandbuttons() // 定义command对话框按钮
canacceptcommand() // 规定能接受command的对象
initializeui() // 初始化用户界面
windowdimensions() // 定义参数对话框的尺寸
sethandler(obj,eventname,fncall, optstr) // 设置特定对象的事件句柄
