当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript+xml实现二级下拉菜单,不会被任何标签或元素遮住

Javascript
IE与firefox下Dhtml的一些区别小结
jQuery Selectors(选择器)的使用(一、基本篇)
jQuery Selectors(选择器)的使用(二、层次篇)
jQuery 跨域访问问题解决方法
jquery的ajax从纯真网(cz88.net)获取IP地址对应地区名
javascript 面向对象全新理练之数据的封装
javascript 面向对象全新理练之继承与多态
javascript 面向对象全新理练之原型继承
JavaScript 生成随机数并自动大小排序
JavaScript利用split函数按规定截取字符串(获取邮箱用户名)
JavaScript 双级下拉菜单实现代码
JavaScript split()使用方法与示例
33种Javascript 表格排序控件收集
js 屏蔽鼠标右键脚本附破解方法
javascript json 新手入门文档
jQuery Selectors(选择器)的使用(四-五、内容篇&可见性篇)
javascript KeyDown、KeyPress和KeyUp事件的区别与联系
javascript 汉字转拼音实现代码
javascript 跳转代码集合
JavaScript 申明函数的三种方法 每个函数就是一个对象(一)

Javascript 中的 javascript+xml实现二级下拉菜单,不会被任何标签或元素遮住


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-03   浏览: 98 ::
收藏到网摘: n/a

 

一、简单说明

该菜单最大的优点是可以跨过网页上任何标签,甚至是框架,
(一般的菜单会被select,object,flash等挡住)
所以如果你有这方面的需要,
那么这个菜单是个很好的选择。

总体而言,它有如下特性:
(1)菜单的样式和数据都是通过xml配置
(2)菜单的样式可以随心所欲修改,如:

<base>
    <background-color>#DDDDDD</background-color>
    <background-image>url(menu_bg.jpg)</background-image>
    <font-size>10pt</font-size>
    <color>#000099</color>
    <width>100%</width>
    <height>32</height>
    <text-align>center</text-align>
    <cursor>default</cursor>
</base>


只要节点名称符合各自标签(table,tr,td之一)的style attribute即可。

(3)主菜单项之间可以设置分割图片,
子菜单项可以设置分割线的样式。

(4)所有图片都由css控制,避免路径问题。

(5)可以设置虚拟目录的别名,为菜单链接使用绝对路径带来方便,如:

<context>
    <path>hdsa</path>
</context>


设置该值后,用户只需根据文件的目录结构写好菜单,而不必担心虚拟目录的问题。

由于菜单使用了window.createPopup(),
所以它被限制在IE5.5以上,
而且子菜单如果是新开窗口,会被拦截。
注:用window.createPopup()制作菜单受到过前人的启发

设置该值后,用户只需根据文件的目录结构写好菜单,而不必担心虚拟目录的问题。

由于菜单使用了window.createPopup(),
所以它被限制在IE5.5以上,
而且子菜单如果是新开窗口,会被拦截。
注:用window.createPopup()制作菜单受到过前人的启发
=====================================================================


二、实现的两个脚本可以写在一个文件中:

(1)处理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家族

 

var oPopup = pops[0];
var timer = null;


/**
*显示一级子菜单
*@param objShow - 显示子菜单的对象
*@param strGetID - 存储显示内容的标签id
*/
function showSubMenu1(objShow,strGetID) {
    clearTimer();
    endHideSubMenu();
    var objGet = eval(document.getElementById(strGetID));
    
    pops[1].hide();
    pops[0].document.body.innerHTML = objGet.innerHTML;
    pops[0].show(0,0,1,1,objShow);
    var intWidth = pops[0].document.body.scrollWidth;
    var intHeight = pops[0].document.body.scrollHeight;
    pops[0].hide();
    pops[0].show(10,objShow.offsetHeight-2,intWidth,intHeight,objShow);
}


/**
*显示二级菜单
*@param strGetID - 存储显示内容的标签id
*@param objTr - 显示子菜单的tr对