我曾经做过一个能够接收货币值的具有大量文本输入域的系统。在该系统开发的后期,客户要求系统设计能自动插入逗号到货币值中。
因为这是一个完完全全的IE5.5企业内部互联网(Intranet)工程,我通过DHTML Behavior很容易地实现了这个需求。我在样式表中创建了一个单独的cash类,指派一个DHTML Behavior并且设置所有域为cash类中的成员。这样做很简单是因为DHTML Behavior是一个强大的开发工具,它允许用一个集中式方法来对HTML元素进行绑定方法和事件处理。它的主要缺点就是它只能运行在IE 5.0+上,所以它们只是在开发某个公司的Intranet时的一个可行的方案。
当我转入到下一个Internet工程时,我一直希望Netscape有一个和DHTML Behaviors相似的集中化事件处理方法。于是我接触了XML绑定语言(XBL),然而我一直都不确定用XBL的XML处理跟它在IE 5.0+中的处理完全一样完善,XBL有一个事件处理机制,这个机制的工作跟DHTML Behaviors的事件处理相似。本文下面的内容将阐述我怎样集中化在IE 5.0中集中插入逗号的事件处理和加入同样特性到Netscape 6+它将会变得怎样简单。
我们先看HTML文件,注意在<HEAD>元素中到样式表的连接。由于简单的原因,HTML文件仅仅包括了单一的输入元素,这个元素是cash类的一个成员,它是用户进入货币值的地方。
(文件名:
Cash.html)
<HTML>
<HEAD><link rel="stylesheet" type="text/css"
href="cash.css"></HEAD>
<BODY>
<P>Cash Value: <input
type="text" class="Cash"></P>
</BODY>
</HTML>
接下来是被HTML页引用的样式表,当IE+5.0下载HTML页时,样式表命令IE绑定cash类中的所有成员到DHTML Behavior。这个样式表指定了DHTML Behavior代码能够在Cash.htc文件中找到。当Netscape 6.0+下载同样的HTML页时,同样的样式表命令Netscape绑定cash类中的所有成员到一个XBL事件处理器,这个样式表指定了绑定的XML能够在Cash.xml文件中找到名为”cash”的绑定。
(File Name: Cash.css)
.Cash
{
BEHAVIOR: url(cash.htc);
-moz-binding: url(cash.xml#cash);
}
下面是从样式表中引用的HTML Component。它绑定InsertCommas()函数中的脚本到onblur事件。当该页面用IE浏览时脚本将执行。
(文件名:Cash.htc)
<PUBLIC:COMPONENT lightWeight="true">
<PUBLIC:ATTACH EVENT=onblur ONEVENT="InsertCommas()" />
<SCRIPT LANGUAGE="JScript">
function InsertCommas() {
varAbsoluteValue = Math.abs(this.value);
varsNumber = String(AbsoluteValue);
if (AbsoluteValue > 999) {
varsTemp = ""; j=3;
for (var i=sNumber.length-1;
i >=0 ; i--){
if
(j==0){
sTemp
= "," + sTemp
j=3;
}
j--;
if
(sNumber.charAt(i) == '.'){
j=3;
}
sTemp
= sNumber.charAt(i) + sTemp
}
this.value
= sTemp;
}
}
</SCRIPT>
</PUBLIC:COMPONENT>
最终的代码清单是用Netscape浏览时样式表绑定到XML文件的页面。你将注意到onblur事件结束时处理器的标识符包含了即将被执行的脚本。
(文件名:Cash.xml)
<?xml version="1.0"?>
<bindings xmlns=NOTRACK http://www.mozilla.org/xbl
xmlns:html="NOTRACK http://www.w3.org/1999/xhtml">
<binding id="cash">
<handlers>
<handler event="blur">
varAbsoluteValue = Math.abs(this.value);
varsNumber = String(AbsoluteValue);
if (AbsoluteValue > 999) {
varsTemp = "";
j=3;
for (var i=sNumber.length-1;
i >=0 ; i--){
if
(j==0){
sTemp
= "," + sTemp
j=3;
}
j--;
if
(sNumber.charAt(i) == '.'){
j=3;
}
sTemp
= sNumber.charAt(i) + sTemp
}
this.value
= sTemp;
}
</handler>
</handlers>
</binding>
</bindings>