您的位置：首页 > Web前端 > JavaScript
JavaScript设计模式系列04_组合模式写的菜单

2018-01-09 20:00 260 查看
效果图：
代码：
<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签： JavaScript 设计模式面向对象
相关文章推荐
新的分享
章节导航