注意在这个工具栏举例中，我们没有规定工具栏的宽度。如果你愿意的话可以规定，但是为了多样化起见，我们包含了一个自定义的例子。工具栏DIV现在有个属性NOWRAP，这样内容就不会包裹起来。我们还设定了一个宽度（width）为20的占位符，这对IE4是必要的。在 IE4 中，除非在页面中已经事先指定了元素的宽度，否则就不能在脚本中设置或修改。在IE5中没有这样的限制。
我们的新工具栏还有一个明显的问题。虽然可变宽度的工具栏条目在纯文本的格式中使用良好，但是当包含了图形时，我们自然希望所有的按钮大小都是一样的。我们可以确定一个宽度，通过将其包含在but类中，应用于所有的元素上。或者，让JavaScript来做这个工作。
我们可以按照如下的代码修改读取的脚本：
< SCRIPT LANGUAGE="JavaScript1.2" TYPE="text/javascript">
allBUTs = toolbar.children;
maxWidth = 0;
for (i=0;i< allBUTs.length;i++) {
tSpan = allBUTs(i);
tSpan.onselectstart = function(){return false}
maxWidth = Math.max(maxWidth,tSpan.offsetWidth);
tSpan.onmouseover = function(){
this.style.border = "1px buttonhighlight outset";
}
tSpan.onmouseout = function(){
this.style.border = "1px buttonface solid";
}
tSpan.onmousedown = function(){
this.style.border = "1px buttonhighlight inset";
}
tSpan.onmouseup = function(){
this.style.border = "1px buttonhighlight outset";
window.focus();
}
}
for (i=0;i< allBUTTONs.length;i++) {
tSpan = allBUTTONs(i);
tSpan.style.pixelWidth = maxWidth;
}
< /SCRIPT>>
我们的意图是确定哪个元素最宽，并使其它元素也同样宽。首先定义一个变量来存储这个宽度maxWidth。当我们在按钮间循环时，将maxWidth的值与我们所在的按钮宽度(tSpan.offsetWidth)相比较，并将较大的值赋予maxWidth。当循环结束完成时，maxWidth就包含了最宽的元素的宽度。
第二次在按钮之间循环时，将这个值赋予所有的按钮宽度。请点击这里看看其中的效果图2。
下一步，让图象翻转过来。
|
