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

Javascript
动态改变图片尺寸(一)
JavaScript+PHP 应用一:网页制作中双下拉菜单的动态实现
JavaScript + PHP 应用二:网页设计中树形菜单的动态实现
在Javascript中为String对象添加trim,ltrim,rtrim方法
纯JavaScript时钟
网页之定时器详解
为网页添加活动的背景音乐
Javascript Game
实用的检测分辨率的程序代码
【推荐】一个非常漂亮的列表框
绝对精彩:在网页里做类似window右键的弹出式菜单
怎样使网页中的元素可编辑??
JavaScript和Java的区别
怎样编写IE和NN6通用的闪烁(blank)效果
关于如何动态地在同一页面实现两个 < select > 互传 (s1 <==> s2)
COOKIE欺骗
连串英文自动换行的方法
JavaScript中的正则表达式(1)
JavaScript中的正则表达式(2)
JavaScript窗口功能指南之定制新窗口

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-03   浏览: 30 ::
收藏到网摘: 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对