|
4 利用DHTML设计级联菜单
DHTML 是一种创建动态和交互 Web 站点的技术集。通常来说，DHTML 意味着 HTML、CSS样式表和 JScript 的组合。HTML用来定义网页元素，如段落、表格等。 CSS用来描述元素属性，如大小、颜色、位置等。 脚本语言用来操纵网页元素和浏览器。因此，利用DHTML设计级联菜单自然也从三个方面入手。由于省级、地市级、县级级联菜单的设计方法类似，因此此处仅以省级菜单的设计为例。
省级菜单的HTML部分主要由一个隐藏的input、一个span以及一个div层三部分所组成。其中input用于存储当前选择的省份的国标代码；span用于显示当前选择的省份的名称，其上定义了鼠标的移入、移出以及单击事件；div层用来模拟下拉菜单效果。CSS样式部分主要是定义了div层的一些样式。
脚本部分主要是针对div层的一些鼠标操作的实现，核心代码及解析如下所示：
<script>
function showHide(obj)
{
//隐现层的函数
sh={block:"none",none:"block"}
//隐藏其余菜单的层
if(document.getElementById("oOption").style.visibility="hidden")
{
document.getElementById("oOption").style.visibility="visible";
}
if(document.getElementById("oOption2").style.visibility="visible") {
document.getElementById("oOption2").style.visibility="hidden";
}
if(document.getElementById("oOption3").style.visibility="visible") {
document.getElementById("oOption3").style.visibility="hidden";
}
//层的display属性值在"block"和"none"间不断轮换，
//达到轮换隐藏和显示的效果
oOption.runtimeStyle.display=sh[oOption.currentStyle.display]
}
</script>
<!--鼠标移上id为oOption的对象时执行本段代码-->
<script event="onmouseover" for="oOption">
obj=event.srcElement
if(obj.tagName=="TD")
{
//判断onmouseover事件是否发生在单元格上
//设置事件发生所在的单元格的背景颜色
obj.style.backgroundColor="#dedede"
//设置事件发生所在的单元格的字体颜色
obj.style.color="#FFFFFF"
}
</script>
<!--鼠标从id为oOption的对象上移开时执行本段代码-->
<script event="onmouseout" for="oOption">
obj=event.srcElement
if(obj.tagName=="TD")
{
//判断onmouseout事件是否发生在单元格上
//设置事件发生所在的单元格的背景颜色
obj.style.backgroundColor="#FFFFFF"
|
