DHTML模拟菜单

{ 在以前的ＨＴＭＬ里，元素的位置只能依次排列，我们很难精确地定位与控制网页中的一些元素。ＣＳＳ２?Ｃａｓｃａｄｉｎｇ Ｓｔｙｌｅ Ｓｈｅｅｔ Ｌｅｖｅｌ ２，层叠样式单第二版?的布局?Ｌａｙｏｕｔ?属性出现并得到浏览器的广泛支持之后，我们不仅可以静态地实现以上目的，而且可以根据鼠标、键盘、时间等预定义好的外界事件动态地改变布局。时下非常流行的网页中“活动的层”便是它的一种形象的运用，我们这里要讲的是如何运用这些属性结合一些ＤＨＴＭＬ对象在网页中实现类似Ｗｉｎｄｏｗｓ窗口的下拉菜单（如图所示）。请看以下代码及详细说明。

＜?－－ 以下部分应该插在代码的＜ｈｅａｄ＞之后 －－＞

＜ｓｔｙｌｅ＞＜?－－

／? 这是一些ＣＳＳ样式。其中″ｂｔｎＴＤ″是按钮在被按下之前“凸起”的样式类：边框被设置为宽度为１个像素的实线，其中左边框和上边框颜色为浅色（这里为白色），右下边框为深色（深灰色），如果背景为灰色的ＨＴＭＬ元素（如单元格）使用这个样式的话，那就非常像一个“凸出”的按钮；“ｂｔｎＤＴＤ”是按钮被按下时“凹下”的样式。 ?／

．ｂｔｎＴＤ ? ｂｏｒｄｅｒ－ｌｅｆｔ? １ ｓｏｌｉｄ ＃ｆｆｆｆｆｆ? ｂｏｒｄｅｒ－ｒｉｇｈｔ? １ ｓｏｌｉｄ ＃８０８０８０?

ｂｏｒｄｅｒ－ｔｏｐ? １ ｓｏｌｉｄ ＃ｆｆｆｆｆｆ? ｂｏｒｄｅｒ－ｂｏｔｔｏｍ? １ ｓｏｌｉｄ ＃８０８０８０? ?

．ｂｔｎＤＴＤ ? ｂｏｒｄｅｒ－ｌｅｆｔ? １ ｓｏｌｉｄ ＃８０８０８０? ｂｏｒｄｅｒ－ｒｉｇｈｔ? １ ｓｏｌｉｄ ＃ｆｆｆｆｆｆ?

ｂｏｒｄｅｒ－ｔｏｐ? １ ｓｏｌｉｄ ＃８０８０８０? ｂｏｒｄｅｒ－ｂｏｔｔｏｍ? １ ｓｏｌｉｄ ＃ｆｆｆｆｆｆ? ?

ｔｄ ? ｆｏｎｔ－ｆａｍｉｌｙ? 宋体? ｆｏｎｔ－ｓｉｚｅ? ９ｐｔ ?

－－＞＜／ｓｔｙｌｅ＞

＜ｓｃｒｉｐｔ ｌａｎｇｕａｇｅ＝″ＪａｖａＳｃｒｉｐｔ″＞＜?－－

／／判断哪个按钮被按下的全局变量

ｖａｒ ｉｎｔＢｌｎＣｌｋ＝０?

／／鼠标经过、离开、点击更改单元格ＣＳＳ样式的函数

ｆｕｎｃｔｉｏｎ ｍＯｖｒＯｕｔ?ｏｂｊＳｒｃ??

ｖａｒ ａｒｇｖ?ａｒｇｃ?ｂｌｎＡｃｔｉｖｅ?ｓｔｒＣｏｌｏｒ?ｓｔｒＢｇＣｏｌｏｒ?ｓｔｒＣｌａｓｓ?ｓｔｒＣｌａｓｓＤ?ｓｔｒＣｕｒｓｏｒ?

ａｒｇｖ＝ｍＯｖｒＯｕｔ．ａｒｇｕｍｅｎｔｓ?ａｒｇｃ＝ａｒｇｖ．ｌｅｎｇｔｈ?

／?默认情况下不将当前对象置为“激活”?／

ｂｌｎＡｃｔｉｖｅ＝?ａｒｇｃ＞１?﹖ｅｖａｌ?ａｒｇｖ［１］??ｆａｌｓｅ?

／?默认鼠标经过当前对象的样式为“凸出的按钮形”?／

ｓｔｒＣｌａｓｓ＝?ａｒｇｃ＞２ ＆＆ ａｒｇｖ［２］?＝′′?﹖ａｒｇｖ［２］?′ｂｔｎＴＤ′?

／?默认鼠标点击的时候当前对象为“凹下的按钮形”?／

ｓｔｒＣｌａｓｓＤ＝?ａｒｇｃ＞３ ＆＆ ａｒｇｖ［３］?＝′′?﹖ａｒｇｖ［３］?′ｂｔｎＤＴＤ′?

／?将当前对象激活时候的前景色为白色、背景色为蓝色、鼠标样式为手形?／

ｓｔｒＣｏｌｏｒ＝′＃ｆｆｆｆｆｆ′?ｓｔｒＢｇＣｏｌｏｒ＝′＃００００８０′?ｓｔｒＣｕｒｓｏｒ＝′ｈａｎｄ′?

／?ＩＥ４及其更高版本才支持这些ＪａｖａＳｃｒｉｐｔ对ＣＳＳ样式的动态改变?／

ｉｆ?ｄｏｃｕｍｅｎｔ．ａｌｌ??

／／将当前对象的鼠标样式置为参数传递值

ｏｂｊＳｒｃ．ｓｔｙｌｅ．ｃｕｒｓｏｒ＝ｓｔｒＣｕｒｓｏｒ?

／／如果是鼠标进入当前对象范围

ｉｆ??ｏｂｊＳｒｃ．ｃｏｎｔａｉｎｓ?ｅｖｅｎｔ．ｆｒｏｍＥｌｅｍｅｎｔ???

／?设置为活动样式?／

ｉｆ?ｂｌｎＡｃｔｉｖｅ?? ｏｂｊＳｒｃ．ｂｇＣｏｌｏｒ＝ｓｔｒＢｇＣｏｌｏｒ?ｏｂｊＳｒｃ．ｓｔｙｌｅ．ｃｏｌｏｒ＝ｓｔｒＣｏｌｏｒ? ?

／?当前对象不需要置为活动样式的时候，如果本来的样式是“凸出的按钮形”则置为“凹下的按钮形”，反之亦然?／

ｅｌｓｅ ｏｂｊＳｒｃ．ｃｌａｓｓＮａｍｅ＝?ｉｎｔＢｌｎＣｌｋ?＝０?﹖ｓｔｒＣｌａｓｓＤ?ｓｔｒＣｌａｓｓ? ?

／／鼠标离开当前对象区域

ｅｌｓｅ ｉｆ??ｏｂｊＳｒｃ．ｃｏｎｔａｉｎｓ?ｅｖｅｎｔ．ｔｏＥｌｅｍｅｎｔ???

／／将这些样式置为默认值

ｏｂｊＳｒｃ．ｂｇＣｏｌｏｒ＝′′?ｏｂｊＳｒｃ．ｓｔｙｌｅ．ｃｏｌｏｒ＝′′?ｏｂｊＳｒｃ．ｃｌａｓｓＮａｍｅ＝′′? ?

??

／? 显示／隐藏层的通用函数。用ｏｂｊＮＳ、ｏｂｊＩＥ、ｓｔｒＳｔｕ作为参数，其中ｏｂｊＮＳ和ｏｂｊＩＥ分别是Ｎｅｔｓｃａｐｅ和ＩＥ的“层”对象，ｓｔｒＳｔｕ为层的状态。因为篇幅所限，请查看本文尾部说明。 ?／

ｆｕｎｃｔｉｏｎ ｓｈｏＨｉｄＬａｙｅｒｓ????

／? 调用上面的函数，显示／隐藏参数传递的层，这样是为了简化代码。这里不给出详细函数。?／

ｆｕｎｃｔｉｏｎ ｓｈｏｗＬａｙｅｒ?ｉｎｔＣｕｒｒｅｎｔ???

／／－－＞＜／ｓｃｒｉｐｔ＞＜／ｈｅａｄ＞

＜ｂｏｄｙ ｏｎＭｏｕｓｅＤｏｗｎ＝″ｉｆ?ｗｉｎｄｏｗ．ｅｖｅｎｔ．ｓｒｃＥｌｅｍｅｎｔ．ｓｔｙｌｅ．ｃｏｌｏｒ＝＝′′? ｓｈｏｗＬａｙｅｒ?１?′ｈｉｄｅ′?″＞

＜?－－ 以上ｂｏｄｙ部分的作用是当鼠标没有按下任何按钮的时候隐藏所有应该隐藏的“菜单”。以下是两个用ＣＳＳ布局定义的层，名为“ｍｅｎｕ”的层的初始状态为：在屏幕上的绝对位置为（１２?１２），可视，层ｚ－ｉｎｄｅｘ属性为１００；“ｍｅｎｕ１”为不可视。 －－＞

＜ｄｉｖ ｉｄ＝″ｍｅｎｕ″ ｓｔｙｌｅ＝″ｐｏｓｉｔｉｏｎ?ａｂｓｏｌｕｔｅ?ｖｉｓｉｂｉｌｉｔｙ? ｖｉｓｉｂｌｅ?ｌｅｆｔ?１２ｐｘ?ｔｏｐ?１２ｐｘ? ｚ－ｉｎｄｅｘ? １００″＞＜ｔａｂｌｅ ｂｏｒｄｅｒ＝″１″ ｃｅｌｌｓｐａｃｉｎｇ＝″０″ ｃｅｌｌｐａｄｄｉｎｇ＝″２″ ｂｇｃｏｌｏｒ＝″＃ｃ０ｃ０ｃ０″ ｂｏｒｄｅｒｃｏｌｏｒ＝″＃ｃ０ｃ０ｃ０″＞

＜ｔｒ＞＜ｔｄ ｏｎＭｏｕｓｅＯｖｅｒ＝″ｍＯｖｒＯｕｔ?ｔｈｉｓ?″ ｏｎＭｏｕｓｅＯｕｔ＝″ｍＯｖｒＯｕｔ?ｔｈｉｓ?″ ｏｎＣｌｉｃｋ＝″ｍＯｖｒＯｕｔ?ｔｈｉｓ?ｆａｌｓｅ?′ｂｔｎＤＴＤ′??ｓｈｏｗＬａｙｅｒ?１?″＞天极网＜／ｔｄ＞＜／ｔｒ＞

＜／ｔａｂｌｅ＞＜／ｄｉｖ＞

＜ｄｉｖ ｉｄ＝″ｍｅｎｕ１″ ｓｔｙｌｅ＝″ｐｏｓｉｔｉｏｎ?ａｂｓｏｌｕｔｅ?ｖｉｓｉｂｉｌｉｔｙ? ｈｉｄｄｅｎ?ｌｅｆｔ?１１ｐｘ?ｔｏｐ?３４ｐｘ? ｚ－ｉｎｄｅｘ? １″＞＜ｔａｂｌｅ ｂｏｒｄｅｒ＝″０″ ｃｅｌｌｐａｄｄｉｎｇ＝″２″ ｃｅｌｌｓｐａｃｉｎｇ＝″０″ ｂｇｃｏｌｏｒ＝″＃ｃ０ｃ０ｃ０″ ｃｌａｓｓ＝″ｂｔｎＴＤ″＞

＜ｔｒ＞＜ｔｄ ｏｎＭｏｕｓｅＯｖｅｒ＝″ｍＯｖｒＯｕｔ?ｔｈｉｓ?ｔｒｕｅ?″ ｏｎＭｏｕｓｅＯｕｔ＝″ｍＯｖｒＯｕｔ?ｔｈｉｓ?″ ｗｉｄｔｈ＝″１００％″ｎｏｗｒａｐ ｏｎＣｌｉｃｋ＝″ｗｉｎｄｏｗ．ｌｏｃａｔｉｏｎ＝′ｈｔｔｐ?／／ｗｗｗ．ｐｃｗｃｌｕｂ．ｃｏｍ／′?ｓｈｏｗＬａｙｅｒ?１?′ｈｉｄｅ′?″＞电脑报读者俱乐部＜／ｔｄ＞＜／ｔｒ＞

＜／ｔａｂｌｅ＞＜／ｄｉｖ＞

因为篇幅所限，一些函数不能详细给出及说明，如果需要完整代码请访问以下链接：ｈｔｔｐ?／／ｃｔｓｉｇｈｔ．ｔｏｐｃｏｏｌ．ｎｅｔ／ｄｏｃｕｍｅｎｔｓ／ｍｅｎｕ．ｈｔｍｌ。