我要投稿
  • 您当前的位置:57365.com -> 技术教程 -> 网站建设教程 -> DOMJS教程 -> 教程内容
  • [ 收藏本页教程 ]
  • javascript+xml实现二级下拉菜单,不会被任何标签或元素遮住DOMJS教程

    教程作者:佚名    教程来源:不详   教程栏目:DOMJS教程    收藏本页
     

    一、简单说明

    该菜单最大的优点是可以跨过网页上任何标签,甚至是框架,
    (一般的菜单会被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对象
    */
    function showSubMenu2(strGetID,objTr) {
        clearTimer();
        endHideSubMenu();
        var objGet = eval(document.getElementById(strGetID));
        pops[1].document.body.innerHTML = objGet.innerHTML;
        pops[1].show(0,0,1,1,pops[0].document.body);
        var intWidth = pops[1].document.body.scrollWidth;
        var intHeight = pops[1].document.body.scrollHeight;
        pops[1].hide();
        pops[1].show(objTr.offsetWidth - 2,-2, intWidth, intHeight, objTr);

    }

    //隐藏一级子菜单
    function hideSubMenu1(){
        //pops[0].hide();
        window.setTimeout("pops[0].hide()", 1000);
    }

    //隐藏二级子菜单
    function hideSubMenu2()
    {
        //clearTimer();
        //timer = window.setTimeout("pops[1].hide()", 1000);
        pops[1].hide();
    }

    //隐藏所有下拉菜单
    function hideSubMenu()
    {
        if(pops[0] != null)pops[0].hide();
        if(pops[1] != null)pops[1].hide();
    }

    function clearTimer()
    {
        if (timer != null)
            window.clearTimeout(timer)
        timer = null;
        //alert("OK");
    }

    (2)读取分析xml数据文件,打印菜单的脚本

    //位置信息
    var m_strTitle = "您的位置->";

    // -------- 主菜单样式相关定义 ---------//

    //定义主菜单样式
    var m_strMainMenuStyle = "";
    //主菜单项的样式attribute
    var m_strMainMenuItemStyle = "";
    //主菜单项样式Property
    var m_strMMItemProBase = {};
    //主菜单项鼠标悬停样式Property
    var m_strMMItemProMOver = {};
    //菜单项与项之间的分割图片
    var m_strMMItemSplitImg;

    // -------- 子菜单样式相关定义 ---------//

    //定义子菜单样式
    var m_strSubMenuStyle = "";
    //子菜单项的样式attribute
    var m_strSubMenuItemStyle = "";
    //子菜单项样式Property
    var m_strSMItemProBase = {};
    //子菜单项鼠标悬停样式Property
    var m_strSMItemProMOver = {};
    //子菜单项下边框样式(作为分割线)
    var m_strSMItemBorderB = "";

    //定义虚拟目录路径
    var m_strContextPath = "";

    //菜单xml数据文件对象
    var m_doc;

    //主菜单集合
    var m_objMMList;


    var STR_POS_FRONT = "您的位置:";

    //loadMenu("main_menu.xml");
    /**
    *加载菜单
    *@param strXMLPath - XML数据文件所在路径及文件名
    */
    function loadMenu(strXMLFile) {
        m_doc = new ActiveXObject("MSXML2.DOMDocument.3.0");
        m_doc.async = false;
        m_doc.load(strXMLFile);

        getMainMenuStyle();
        getSubMenuStyle();

        //得到主菜单集合
        m_objMMList = m_doc.selectSingleNode("//popmenu/menus").childNodes;

        //得到虚拟目录
        if( m_doc.selectSingleNode("//popmenu/context/path") ) {
            m_strContextPath = m_doc.selectSingleNode("//popmenu/context/path").text;
        }

        //输出主菜单
        printMainMenu();
        //输出一级子菜单
        printSubMenu();
        
    }


    /**
    *鼠标移入移出主菜单样式的改变
    *@param obj - 改变样式的对象
    *@param bolChg - 是否改变样式
    */
    function chgMainMenuStyle(obj,bolChg)
    {
        if ( bolChg ) {//鼠标悬停改变颜色
        &

    我要投稿   -   广告合作   -   关于本站   -   友情连接   -   网站地图   -   联系我们   -   版权声明   -   设为首页   -   加入收藏   -   网站留言
    Copyright © 2009 - 20012 www.www.hxswjs.com All Rights Reserved.57365.com 版权所有