JavaScript设计模式系列04_组合模式写的菜单

最新推荐文章于 2022-04-08 18:59:59 发布

田江

最新推荐文章于 2022-04-08 18:59:59 发布

阅读量381

点赞数

分类专栏： JavaScript从入门到精通文章标签： JavaScript 设计模式面向对象

本文链接：https://blog.csdn.net/jiang7701037/article/details/79016804

版权

JavaScript从入门到精通专栏收录该内容

147 篇文章 79 订阅

订阅专栏

效果图：

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{ padding:0; margin:0}
        ul{ list-style:none}
        a{ text-decoration:none; display:block; width:200px; height:50px;}
        .one{ width:1000px; height:50px; line-height:50px; background:#ff0; margin:0 auto;}
        .oneli{ float:left; width:200px; height:50px; text-align:center; position:relative;}
        .oneli a:hover{ background:#0ff;}
        /*二级菜单*/
        .two{ width:200px; background:#96F; position:absolute; display:none; }
        .oneli:hover .two{ display:block;}
        .twoli a:hover{ background:#90F}
        .twoli{ position:relative;}
        /*三级菜单*/
        .three{ width:200px; background:#FF9; position:absolute; top:0px; left:200px; display:none;}
        .twoli:hover .three{ display:block;}
        .threeli a:hover{ background:#FC0}
        /*最后一个的三级菜单*/
        .last .three{ width:200px; background:#FF9; position:absolute; top:0px; left:-200px; display:none;}
        .last .twoli:hover .three{ display:block;}
        .last .threeli a:hover{ background:#FC0}

    </style>
</head>
<body>

</body>
</html>

<script type="text/javascript">

    function  $(id) {
        return document.getElementById(id);
    }
    function  $create(tagName) {
        return document.createElement(tagName);
    }

    //菜单类
    function MenuItem(obj) {
        this.isRoot = obj.isRoot;//是树根
        //菜单标题，菜单上的文字
        this.menuTitle = obj.menuTitle;
        //菜单功能（超链）
        this.url = obj.url;
        this.className = obj.className;
        //菜单的子菜单数组
        this.subMenus=[];
        //子菜单容器的class
        this.subClassName = obj.subClassName;
    }

    //菜单功能：
    //创建菜单的外观
    MenuItem.prototype.createUI = function (parentDom) {
        if(!this.isRoot){//如果是树根的话，没有外观
            //1、创建本身
            var liDom = $create("li");
            liDom.className = this.className;
            if(this.url==""){
                let spanDom = $create("span");
                spanDom.innerHTML = this.menuTitle;
                liDom.appendChild(spanDom);
            }else{
                let aDom = $create("a");
                aDom.innerHTML = this.menuTitle;
                aDom.href=this.url;
                liDom.appendChild(aDom);
            }
            parentDom.appendChild(liDom);
        }
        //2、创建子菜单
        if(this.subMenus.length>0){
            //1）、给子菜单创建一个容器（ul）
            let ulDom = $create("ul");
            ulDom.className = this.subClassName;
            if(this.isRoot){
                document.body.appendChild(ulDom);
            }else{
                liDom.appendChild(ulDom);
            }
            //2）、循环子菜单数组，调用每个子菜单对象自身的createUI
            for(let i in this.subMenus){
                this.subMenus[i].createUI(ulDom);
            }
        }
    }

    //添加子菜单
    MenuItem.prototype.addSubMenu = function (menuItemObj) {
        this.subMenus.push(menuItemObj);
    }

    window.onload = function () {
        //创建一级菜单
        var m1 = new MenuItem({
            "menuTitle":"一级菜单1",
            "url":null,
            "className":"oneli",
            "subClassName":"two"
        });

        //创建二级菜单
        var m11 = new MenuItem({
            "menuTitle":"二级菜单11",
            "url":null,
            "className":"twoli",
            "subClassName":"three"
        });
        //把m11作为m1的子菜单
        m1.addSubMenu(m11);

        //创建二级菜单
        var m12 = new MenuItem({
            "menuTitle":"二级菜单12",
            "url":null,
            "className":"twoli",
            "subClassName":"three"
        });
        //把m12作为m1的子菜单
        m1.addSubMenu(m12);

        //创建二级菜单
        var m13 = new MenuItem({
            "menuTitle":"二级菜单13",
            "url":null,
            "className":"twoli",
            "subClassName":"three"
        });
        //把m13作为m1的子菜单
        m1.addSubMenu(m13);

        //创建三级级菜单
        var m111 = new MenuItem({
            "menuTitle":"百度一下",
            "url":"http://www.baidu.com",
            "className":"threeli"
        });
        //把m111作为m11的子菜单
        m11.addSubMenu(m111);

        //创建三级级菜单
        var m112 = new MenuItem({
            "menuTitle":"淘宝",
            "url":"http://www.taobao.com",
            "className":"threeli"
        });
        //把m112作为m11的子菜单
        m11.addSubMenu(m112);

        //创建一级菜单
        var m2 = new MenuItem({
            "menuTitle":"一级菜单2",
            "url":null,
            "className":"oneli",
            "subClassName":"two"
        });

        //创建一级菜单
        var m3 = new MenuItem({
            "menuTitle":"一级菜单3",
            "url":null,
            "className":"oneli",
            "subClassName":"two"
        });

        //创建根菜单（根菜单在页面上没有显示，只是数据上的表示）
        let rootMenu = new MenuItem({
            "isRoot":true,
            "subClassName":"one"
        });
        //把m1，m2，m3作为rootMenu的孩子
        rootMenu.addSubMenu(m1);
        rootMenu.addSubMenu(m2);
        rootMenu.addSubMenu(m3);

        //显示菜单
        rootMenu.createUI();
    }

</script>

田江

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript设计模式系列04_组合模式写的菜单

效果图：代码： *{ padding:0; margin:0} ul{ list-style:none} a{ text-decoration:none; display:block; width:200px; height:50px;} .one{ width:1000px; h
复制链接

扫一扫