使用检查器进行编辑

---原作《网猴》 编译《搜狐》
我们用Dreamweaver内置的方法--"canInspectSelection"--来决定是否进行检查,
另外我们还有一个相关的方法--称为"inspecSelection"--每当检查器被选中时就会自动调用此方法。"inspectSelection"一般通过创建表单域和初始化界面来设置检查器,下面就是我们编写的"inspectSelection"的内容:

function inspectSelection() {
// initialize UI
findObject('mySearch').checked = false;
findObject('mySearch_2').checked = false;
findObject('mySearchName_2').value = '';
  // see if devSearch is included. If it is, check devSearch box.

devSearch = /<option name="devOption" 
value="hotwired.com insidedhtml.com webreview.com
builder.com webcoder.com zdnet.com projectcool.com webdeveloper.com
w3c.com xml.com microsoft.com netscape.com">/i; if(theDocumentForm.innerHTML.match(devSearch))
findObject('mySearch').checked = true;
  // see if mySearch is included. If it is, 
populate fields and check the mySearch box.
mySearch = /<option name="myOption" value="([\w\.\/]*\s*)? ([\w\.\/]*\s*)?([\w\.\/]*\s*)?
([\w\.\/]*\s*)?">([^\n\r]*)\s*(.*)<!-- end mySearch -->)/i; mySearches = theDocumentForm.innerHTML.match(mySearch); if(mySearches) { findObject('mySearch_2').checked = true; if(mySearches[5] || mySearches[6]) findObject('mySearchName_2').value = mySearches[5]
+ ' ' + mySearches[6]; // grab all the sites that matched if(mySearches[4]) findObject('my4_2')
.value = Trim(mySearches[4]); if(mySearches[3]) findObject('my3_2')
.value = Trim(mySearches[3]); if(mySearches[2]) findObject('my2_2')
.value = Trim(mySearches[2]); if(mySearches[1]) findObject('my1_2')
.value = Trim(mySearches[1]); } else { findObject('mySearch_2').checked = false; } }
首先需要注意的就是"findObject"方法,它可以省却你在界面内如何指定对象时可能遇到的麻烦。你需要做的是向其提供基本元素的名称,这样他就可以返回对象参照。但这不是Dreamweaver内置组件,它是一套非常有用的编码(由Macromedia JavaScript向导精灵编写而成),你可以在大多数内建检查器中找到它,并拷贝到你自己的系统中来使用。函数前三行使用"findObject"来清除检查器内的界面元素。

下一行使用标准表述方式来查看当前表单中的编码是否包含开发者的搜索HTML编码,如果有,我们就会将相应的复选框选中。

接下来我们为用户自定义搜索做同样的配置,并确保将通用表达方式包括在内,以便使我们能够单独抓取所有网站信息并将其置于检查器的四个表单域内(注意Trim()函数不是Dreamweaver的一个组件,它是由Rich Blaylock编写的浏览器检测编码内容中的一个功能函数。)如果我们没有找到用户搜索,就应该不选中该复选框。

上面讲的就是让检查器工作的所有设置,下面我们将接触一个比较复杂的部分--编辑文件。

编辑文件

让检查器编辑文件共需两项设置,首先我们需要添加一个事件控制柄,在检查器修改文件时进行控制,其次就是我们需要编写可以产生变化的编码。

由于我们希望在属性控制器中的任何变化都在文件中有所反应,我们就需要为属性检查器中的每个表单域添加一个事件控制柄,以便对文件的HTML编码做出反应。例如创建开发者搜索检查框的编码可能是下面这个样子:

<input type="checkbox" name="mySearch" onClick="editSelection()"> Developer search

"onClick"控制柄在检查框被点击时将呼出"editSelection"函数,这就意味着只要用户变化,无论检查框是否被选中,"editSelection"函数均会被呼出。而用于输入用户搜索网站的四个文本框编码的样式如下:

<input maxlength=25 type="text" name="my1_2" onBlur="if (findObject('mySearch_2').checked) editSelection()" >

每当光标进入文本框继而又离开时,上面的这行编码将检查用户搜索复选框是否被选中(如果我们并不打算做任何修改,一般情况下也不会进入文本编辑模式),接着如果发现复选框被选中,它将呼出"editSelection"函数。

好了,到目前为止一切都还顺利,下面让我们来看一看"editSelection"这个检查器最重要的函数之一。在本例中,"editSelection"与对象中的"objectTag"函数几乎相同。但实际两者间也有一些区别,具体表现在最后一行。在"objectTag"函数中,我们只返回下面这行编码:

return returnHTML;

而在"editSelection"置标符函数中,我们应该准确地修改文档内容,而不应仅告诉Dreamweaver我们需要插入下列编码:

theDocumentForm.outerHTML = returnHTML;

这就是结束编辑的检查器文档的内容。

通过上面的介绍,你现在对检查器的内容有所了解了吗?下面让我们再来看一看"Behaviors"的有关内容.