本文中，我将建立一个定制，可重用组件一定要通过 XBL 来定制其行为。我所描述的方法，可以帮你创建定制组件，它可以用于基于 Mozilla 的浏览器。 ( 注释：这个例子中的编码样品在 Firefox1.0.1 版本中已经测试过。 )
尽管 Web 服务器的使用者都满足于它的可设计性， Web 前端却常常被浏览器的局限性所限制。 IE 允许 ActiveX 控件与 Web 页面合并，这种 Web 页面可以通过脚本使各种不同的组件之间协调一致，这样一来，它就解决了上述问题。所有这些后来都在 HyperText Components(HTCs) 中得到了扩充和发展。
IE 的功能是捆绑的结果，是为了满足市场对于功能性的要求而设计出来的。而开发人员设计 Mozilla 正是为了为用户提供一种环境，在这种环境下， HTML 与动态行为之间的关联是安全的。在 Mozilla 的 XBL 执行的过程中这一点表现得很明显，在这里你可以将 HTML 元素组合成合并式的组件，允许创建定制控件。
在使用移动 DIV 元素的过程中， Web 页面中用来突出显示信息的定义箱就是定制控件的一个好例子，这个元素被限定在一个定制元素中。这样，定义数据就会在 DIV 中显示出来。这是一个很有用的控件，因为它在不改变 Web 页面的外观的情况下可以改变其状态。它还将定义信息与诸如一个图象或一个词语的特定区域绑在一起。
通常，这一步可以通过处理特定元素的 mouseover 事件来完成。事件管理者就会按所得到的信息设置一个 DIV 元素内部的 HTML ，并突出显示这个元素。 Mouseout 事件则负责在鼠标离开该元素以后隐藏 DIV 元素。以下是完成这一步的一些简单编码：
<script language="JavaScript">
function element_onmouseover(info) {
var msg = document.getElementById("divMsg");
msg.innerHTML = info;
msg.style.visibility = "visible";
}
function element_onmouseout() {
var msg = document.getElementById("divMsg");
msg.style.visibility = "hidden";
}
</script>
<a href="#" onmouseover="element_onmouseover('After.')"
onmouseout="element_onmouseout()">
<div style="visibility:hidden;" id="divMsg">Before.</div>
用 XBL 创建 content groups ，创建了以后这些组就可以被当作个别控件来参考了。我将用 XBL 通过同样的方法来创建控件，然后添加附加的风格信息，创建移动文本：
<?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl"
xmlns:html="http://www.w3.org/1999/xhtml">
<binding id="custom" styleexplicitcontent="true">
<implementation>
<property name="definition"/>
</implementation>
<handlers>
<handler event="mouseover">
if (typeof(this.definition) == "undefined")
this.definition = this.getAttribute("definition");
var msg = document.getAnonymousNodes(this)[1];
msg.innerHTML = this.definition;
msg.style.left = event.clientX;
msg.style.top = event.clientY;
msg.style.visibility = "visible";
</handler>
<handler event="mouseout">
var msg = document.getAnonymousNodes(this)[1];
msg.style.visibility = "hidden";
</handler>
</handlers>
<content>
<children/>
<html:div id="msg"
style="position:absolute;visibility:hidden;border:1px solid
#000000;background-color:#FFFFFF;"></html:div>
</content>
</binding>
</bindings>
