当前位置: 首页 > 图文教程 > Java技术 > Java Web开发 > 无限菜单之 xml+popup 版(IE5.5+)
Java Web开发 中的 无限菜单之 xml+popup 版(IE5.5+)
在IE5.5+中开始支持的Popup窗口有很多很特别的特性:
因为这些特征,Popup窗口制作的菜单比起传统的div(层)实现的菜单有着得天独厚的优势,不仅效果会非常好,而且代码也会是非常少的,只是对于实现起来却有几个需要解决的棘手问题:多个Popup共存的问题、如何递归生成菜单、如何控制Popup的显示隐藏……
var pops = new Array(); // 用来存储Popup窗口家族的数组
function CreatePopup(degree)
{ if (degree < 0) // 层数不能小于0 return null; if (pops[degree] != null) //如果已经存在则不需创建 return pops[degree]; if (degree == 0) pops[0] = window.createPopup(); //创建最顶层Popup窗口 else{ if (pops[degree - 1] == null) pops[degree - 1] = CreatePopup(degree - 1) //递归回溯一层一层开始创建 pops[degree] = pops[degree - 1].document.parentWindow.createPopup(); //从父Popup窗口创建子Popup窗口 } pops[degree].document.body.setAttribute("degree", degree); return pops[degree];
}
CreatePopup(1); //创建一个2层的Popup家族
<?xml version="1.0" encoding="GB2312"?> <Menu> <MenuItem Text="菜单1"> <MenuItem Text="菜单1子菜单"/> </MenuItem> <MenuItem Text="菜单2"/> </Menu>
<!-- 遍历子菜单 --> <xsl:for-each select="MenuItem"> <tr height="18" width="17" align="center"> <IMG SRC="images/dot1.gif" WIDTH="6" HEIGHT="6" BORDER="0" ALT=""/> </td> <td> <xsl:value-of select="@Text" /> <xsl:if test="count(MenuItem) > 0"> <!-- 这里用来存储子菜单的xml数据 --> <xml> <xsl:copy-of select="."/> </xml> </xsl:if> </td> <td width="20" align="right" valign="top" style="padding-right: 6px; padding-top:4px;"> <!-- 如果有子菜单则显示箭头 --> <xsl:if test="count(MenuItem) > 0"> <img src="images/arrowR.gif"/> </xsl:if> </td> </tr> </xsl:for-each>
// 创建当前窗体(可以是IE窗体也可以是Popup窗体)的Popup对象
// 这个Popup对象就是用来存储子菜单数据的
var oPopup = document.parentWindow.createPopup();
// 装载xsl
var stylesheet = new ActiveXObject("Microsoft.XMLDOM");
stylesheet.async = false;
stylesheet.load( "menu.xsl" );
// 鼠标经过菜单项
function ItemOver(obj)
{ // 隐藏已经打开的菜单项 if (preObj != null) { if (preObj == obj) return; oPopup.hide(); // 要清空原Popup中的数据——document.write()方法是接着原来的内容往里面写,所以如果不清空会出现重复数据 oPopup = document.parentWindow.createPopup(); // 恢复前一个菜单项的状态 ItemNormal(preObj); preObj = null; } obj.className='PopMenuItemOver'; if (obj.cells(2).children.length > 0) //有子菜单 { obj.cells(2).children(0).src = "images/ArrowRHighlight.gif"; // 获取子菜单xml数据 var subMenuData = obj.all.tags("xml")(0).XMLDocument; // 根据子菜单xml数据和当前xsl文档生成HTML var sHtml = subMenuData.transformNode(stylesheet); // 将解析出来的HTML全部输出到Popup中,在Popup中,又可以利用这些脚本再Popup…… oPopup.document.write(sHtml); // 计算popup内容的实际宽度高度 oPopup.show(0, 0, 1, 1, obj); var width = oPopup.document.body.scrollWidth; var height = oPopup.document.body.scrollHeight; oPopup.hide(); // 显示菜单 oPopup.show(obj.offsetWidth, 0, width, height, obj); preObj = obj; }
}
// 鼠标移出菜单项
function ItemOut(obj)
{ if (oPopup.isOpen && preObj == obj) // 如果子菜单被打开则跳过 return; ItemNormal(obj);
}
// 恢复到菜单项的默认状态
function ItemNormal(obj)
{ obj.className='PopMenuItem'; if (obj.cells(2).children.length > 0) { obj.cells(2).children(0).src = "images/ArrowR.gif"; }
}
评论 (0) All