把菜单的项目逐个解析成为DHTML的元素。
列表2:能够表现我们所定义的菜单数据的一种XSL (Menus.xsl)
在最早的Menu.xsl定义中,我们把菜单的交互方式(即如何响应鼠标的动作),以及颜色和字体等风格元素都与XSL结合在一起。但是我们发现还可以分离,一边保留更大的灵活性。所以我们又定义了Menus.css和Menus.js文件,单独定义了菜单主项和子项的外观等特性,以及如何响应用户的动作,这样我们又获得了进一步的灵活性。
列表3:在XSL中可以调整的格式表StyleSheet (Menus.css)
/* MENUS.CSS */
BODY { font-family:verdana; font-size:60%; background-color:ffffff; }
H1 { font-size:120%; font-style:italic; }
DIV#divMenuBar { background-color:#6699cc; }
TABLE#tblMenuBar TD { font-size:60%; color:white; padding:0px 5px 0px 5px; cursor:default; }
TABLE#tblMenuBar TD.clsMenuBarItem { font-weight:bold; cursor:hand; }
DIV.clsMenu {
font-size:100%; background-color:#000000;
position:absolute; visibility:hidden; width:130px;
padding:5px 5px 5px 8px; border-top:1 white solid;
}
DIV.clsMenu A { text-decoration:none; color:white; font-weight:bold; }
DIV.clsMenu A:hover { color:blue; }
菜单的解析代码Menus.xsl中还包含了一个外部的Javascript代码文件,这样我们的动态菜单的各个模块就可以协同工作了。
列表4:实现Menu的交互方式的代码 (Menus.js)
/* MENUS.JS */
var eOpenMenu = null;
function OpenMenu(eSrc,eMenu)
{
eMenu.style.left = eSrc.offsetLeft + divMenuBar.offsetLeft;
eMenu.style.top = divMenuBar.offsetHeight + divMenuBar.offsetTop;
eMenu.style.visibility = "visible";
eOpenMenu = eMenu;
}
function CloseMenu(eMenu)
{
eMenu.style.visibility = "hidden";
eOpenMenu = null;
}
function document.onmouseover()
{
var eSrc = window.event.srcElement;
if ("clsMenuBarItem" == eSrc.className)
{
eSrc.style.color = "moccasin";
var eMenu = document.all[eSrc.id.replace("tdMenuBarItem","divMenu")];
if (eOpenMenu && eOpenMenu != eMenu)
{
CloseMenu(eOpenMenu);
}
if (eMenu)
{
OpenMenu(eSrc,eMenu);
}
}
else if (eOpenMenu && !eOpenMenu.contains(eSrc) && !divMenuBar.contains(eSrc))
{
CloseMenu(eOpenMenu);
}
}
function document.onmouseout()
{
var eSrc = window.event.srcElement;
if ("clsMenuBarItem" == eSrc.className)
{
eSrc.style.color = "";
}
}
下面我们只要对以上与数据、交互方式和风格相关的各种文件进行一些参数修改就能够改变这个菜单模块的行为和表现了。修改Menu.xml能够动态增加菜单的内容信息,修改menu.xsl能够改变菜单的格局,修改menus.js能够改变菜单的交互方式,修改menus.css能够改变菜单的颜色、字体等外观。
例如,只是在Menu.xsl和menu.js修改很少代码,就能够让以上的菜单信息表现出完全不同的一种交互风格,成为垂直型的弹出菜单。如果你有兴趣,就在示例的代码中自己修改一下,变成自己的菜单代码吧(在我们提供的下载代码中,menus2.xsl和menus2.js等都是修改后的实例)。
图2:改变XSL文件参数后弹出式菜单的另一种外观
总结 通过这样一个简单却很有趣的编程经历,我们发现XML确实是一种非常灵活的网络信息表现语言,它的与显示无关的特性能够让我们在这个初步探索的基础上为它增加更多的特性。例如,我们的下一步目标就是把menus.xml用一段ASP程序所替代,在我们的网站数据库中动态提取当前页面所需要的菜单内容,然后再结合增强的XSL和Javascript编写更加复杂的菜单模块。