创建自己的Web Menu(1)
要实现客户端的功能,看来JavaScript语言是绕不过了。花了3天时间在网上找了一些JavaScript的资料并且找到《JavaScript圣经》大概通读一遍。心中对我要做的东西有了个模糊的轮廓,先来看看要实现的功能:
- 当鼠标移动到菜单项上要高亮显示菜单项。
- 当鼠标移动到有子菜单的菜单项上时应该弹出子菜单。
- 菜单的内容应该可以配置,用XML来保存。
- 当鼠标在子菜单上移动时应该标识出子菜单的父菜单项。
- 当用户点击到菜单项的时候,应响应用户的行为定位到相应的页面。
再看看用什么样的HTML元素来表示菜单,使用Div,Span,Table还是用UR?因为我是做竖版的Menu,所以就不用Span了,因为Span是不换行的-做横版的Menu就可以用Span:)。用Table的话,太不灵活,还要管理Table本身的一些元素。用UR的话,没有子菜单倒是很简单也很方便,不过就不适合用于做带子菜单的Menu了。
要实现Web Menu的显示,样式表是必不可免了。现看看需要用到的核心的样式表元素:
- 首先是确定Menu的显示位置以及尺寸,是用static,relative还是absolute。absolute是用不成了,除非你的网站全不都是使用Absolute方式,这样用起来可能会好一些,relative是基于父元素计算偏移量,最后的选择是使用默认的static,这样适用性也比较强。
- 下来是考虑子菜单的显示和隐藏。使用visibility呢还是使用display。visibility虽然会隐藏子菜单但是它依然会占用网页的空间,但是display就不会,它应该是真正的隐藏,所以使用display。
子菜单显示在什么地方是一个很关键的问题。DHTML提供了一大堆的最表属性,看得让人头晕,不过最后还是使用OffsetParent得offset族得坐标来确定子菜单得具体位置,这样得话要写一个递归函数来获得具体得坐标。我们可以从下图看到Web元素得各种坐标:
可以通过递归计算当前元素得父元素得offsetLeft属性计算出当前元素应显示得left坐标:
function getAscendingLefts(elem)
{
if (elem==null)
return 0;
else
{
if (elem.style.position=='absolute' || elem.style.position=='relative') return 0;
return elem.offsetLeft+getAscendingLefts(elem.offsetParent);
}
}
同理也可一写出计算Top坐标得函数:
function getAscendingTops(elem)
{
if (elem==null)
return 0;
else
{
if ((elem.style.position=='absolute' || elem.style.position=='relative')) return 0;
return elem.offsetTop+getAscendingTops(elem.offsetParent);
}
}