Object类插件的作用就是插入一段代码到你正在编辑的文件中,至于什么代码,视不同插件而定。在这个例子中,我们用显示OICQ在线来做一个Dreamweaver的Object类型插件 原理和任务 在网页中加入
则可以在网页上显示出一个小图片,表示你的OICQ是否在线。在这里,我们不关心具体怎么做到显示在线,而是要想办法把上面的代码插入到网页中去。另外, 和会显示出另外二种不同风格的在线(不在线的图片)。因此,我们的任务变成了根据用户的选择,把下面3句话中的任何一句插入到网页中: 好了,既然大家已经知道了原理,那么我们完全可以在网页中直接加入以上代码来完成这个插件的效果了。 首先,我们先来了解一下Object类型插件。所有的此类型插件都放在Dreamweaver安装目录/Configuration/objects下的目录中,通过点击ojbect面板上的小三角来切换不同的目录。一个插件就是一个HTML文件和一些辅助文件(图片、脚本等等)。插件的工作流程大概如下:从用户端取得一些数据 - 用脚本来处理数据 - 把处理过的数据返回给在编辑的页面。最后,我们再来做一个实验。在贒reamweaver安装目录/Configuration/objects下的任何一个目录中新建一个文本文件,随便取名字,里面随便写上一些你喜欢的话。从新启动Dreamweaver,你就会发现,object面板中多了一个立体的带问号的方块。点击一下,刚才文本文件中的话就被插入在当前编辑的网页中了。而我们要做的不是这么简单的插入不变的话,是要根据用户选择并处理过的代码。为此,我们需要建立一个新的HTML文? OICQ STATUS 需要说明的是和之间的东西。插件做好之后,在Dreamweaver中的object面板上,当鼠标移动到这个插件上的时,里面的话就会在鼠标旁边显示出来 。 这样还没有结束,用户在那里输入自己的OICQ号码并选择自己喜欢的风格呢?HTML里能输入文字的就是文本框了,而选择项可以有很多实现方法,有radio button、list/menu等,由于只有3种风格,比较少,因此我们选择radio button。代码如下: 由于需要对文本框和radio button进行引用,因此需要在上面代码的外面再加一个表单,于是,整个HTML代码已经完成: OICQ STATUS 在这里之前,需要了解一个函数 objectTag() 。他是Object类插件专用函数,返回要插入的代码。虽然已经有此函数,但是在脚本中还必须从新定义。比如 function objectTag() { return "织梦地带";} 这个函数就会在页面中插入织梦地带四个红字。 知道了这个函数,那么一切事情都将顺利的进行下去。如果你对Javascript有所了解,那么剩下的事情你可以自己完成了;如果你还是新手,那么请跟我继续向下读。还记得我们刚才制作的HTML页面吗?现在我们需要对它中的内容做一些处理。我们先来定义一个变量number,用来保存用户输入的OICQ号码。那么定义以及附值语句为: var number; number=document.oicq.niu.value; 然后我们再来定义一个变量msg,用来保存要插入到网页中的语句。 var msg; 因为有三种风格可供用户选择,那么变量msg会有三种不同的值。我们可以用一个判断语句来判断用户到底选中了哪个radio button,并附给msg不同的值。代码如下: if (document.oicq.status[2].checked){ msg = "" } if (document.oicq.status[1].checked){ msg = "" } if (document.oicq.status[0].checked){ msg = "" } 因为必有一个radio button被选中,所以可以不加else语句。最后,再将msg的值返回:return msg ;整个代码已经完成,如下: OICQ STATUS 保存为oicq.htm。现在做成插件只是可以用而已,要是给别人或者供大家下载还是很不够的。 把刚才制作过的插件放在Dreamweaver安装目录/configuration/objects/common下之后,从新启动Dreamweaver(或者用鼠标指在object面板按住CRTL键,按鼠标左键,选择Reload Extensions),会发现在object面板上多了一个问号,点一下,刚才费了半天神的插件终于有作用了,虽然丑陋了点。没关系,再用Dreamweaver打开它,对每个radio button和文本框做上注释说明,并插入图片做效果演示。一个完整的插件就做好了。最最后,从OICQ软件中把小企鹅的ico提取出来,并存为18px * 18px的名字为oicq.gif的图片,和oicq.htm放在同一目录下,再进行刚才的操作,这个插件就被包装完毕了。下面是我做的整个代码,虽然细节可能不同,整个思想过程完全是一样的 Oicq Status Oicq StatusOicq number: