JS构建菜单

1.定义菜单项内容

var _menus=null;
_menus = {"menus":[{"menuid":"60","icon":"icon-sys","menuname":"系统管理","menus":[{"menuid":"6001","menuname":"注册信息修改","icon":"icon-log","url":"groupManage.action?methoed=selectInfo","menus":[]},{"menuid":"6002","menuname":"下级管理员","icon":"icon-log","url":"jsp/groupUser.jsp","menus":[]},{"menuid":"6003","menuname":"导入通讯录","icon":"icon-log","url":"ImportExcel.jsp","menus":[]},{"menuid":"6004","menuname":"部门管理","icon":"icon-log","url":"deptManage_root.action","menus":[]},{"menuid":"6005","menuname":"人员管理","icon":"icon-log","url":"employeeManage_root.action","menus":[]},{"menuid":"6006","menuname":"合并联系人","icon":"icon-log","url":"jsp/mergeEmployee.jsp","menus":[]},{"menuid":"6007","menuname":"生成版本","icon":"icon-log","url":"jsp/sqlite.jsp","menus":[]}]}{"menuid":"13","icon":"icon-sys","menuname":"文件传递","menus":[{"menuid":"1301","menuname":"文件查看","icon":"icon-log","url":"jsp/filepass/filepasslist.jsp","menus":[]},{"menuid":"1302","menuname":"文件发送","icon":"icon-log","url":"jsp/filepass/filepass.jsp","menus":[]}]}]};

 

2.定义菜单函数

//初始化左侧菜单
function InitMenu() {
　　$(".easyui-accordion").empty();
　　var menulist = "";
　　//循环加载菜单
　　$.each(_menus.menus, function(i, n) {
　　　　if (n){
　　　　　　　　menulist += '<div title="'+n.menuname+'" icon="'+n.icon+'" style="overflow:auto;">';
　　　　　　　　menulist += '<ul>';
　　　　　　　　$.each(n.menus, function(index, o) {
　　　　　　　　　　if (o) {
　　　　　　　　　　　　menulist += '<li><div><a target="mainFrame'+o.menuid+'" href="' + o.url + '" >'+
　　　　　　　　　　　　'<span class="icon '+o.icon+'" ></span>' + o.menuname + '</a></div></li> ';
　　　　　　　　　　}
　　　　　　　　})
　　　　　　　menulist += '</ul></div>';
　　　　}
　　})
　　$(".easyui-accordion").append(menulist);
　　//给菜单加载一个点击事件
　　$('.easyui-accordion li a').click(function(){
　　　　var tabTitle = $(this).text();
　　　　var url = $(this).attr("href");
　　　　var target = $(this).attr("target");
　　　　addTab(tabTitle,url,target);
　　　　$('.easyui-accordion li div').removeClass("selected");
　　　　$(this).parent().addClass("selected");
　　}).hover(function(){
　　　　$(this).parent().addClass("hover");
　　},function(){
　　　　$(this).parent().removeClass("hover");
　　});

}

 

3. 定义菜单容器，添加菜单

<div class="easyui-accordion accordion accordion-noborder" fit="true" border="false" style="width: 191px; height: 212px;">

$(function(){
//初始化菜单
　　InitMenu();
});

 

4.定义菜单样式

*{font-size:12px; font-family:Tahoma,Verdana;}
body{background:#D2E0F2; }
a{ color:Black; text-decoration:none;}
a:hover{ color:Red; text-decoration:underline;}

.head a{color:White;text-decoration:none;}
.head a:hover{ color:Red; text-decoration:underline;}

.easyui-accordion ul{list-style-type:none;margin:0px; padding:10px;}
.easyui-accordion ul li{ padding:0px;}
.easyui-accordion ul li a{line-height:24px;}
.easyui-accordion ul li div{margin:2px 0px;padding-left:10px;padding-top:2px;}
.easyui-accordion ul li div.hover{border:1px dashed #99BBE8; background:#E0ECFF;cursor:pointer;}
.easyui-accordion ul li div.hover a{color:#416AA3;}
.easyui-accordion ul li div.selected{border:1px solid #99BBE8; background:#E0ECFF;cursor:default;}
.easyui-accordion ul li div.selected a{color:#416AA3; font-weight:bold;}

.icon{padding:2px 9px; background:url(../images/tabicons.png) no-repeat; }
.icon-sys{ background:url(../images/directory.png) no-repeat;}
.icon-add{background-position: -19px 0px;}
.icon-nav{background-position: -100px -18px;}
.icon-users{background-position: -100px -480px;}
.icon-role{background-position: -360px -200px;}
.icon-set{background-position: -380px -200px;}
.icon-log{background-position: -380px -80px;}

 

5.菜单截图