20107 月27
buffalo+list+ul+li 实现Ajax多级菜单
源代码
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk"> <title>LeftMenu</title> <LINK href="css/menu.css" type=text/css media=screen rel=stylesheet> <script language="javascript" src="script/prototype.js"></script> <script language="javascript" src="script/buffalo.js"></script> </head>
<script language="javascript">
var endPointTop = '/${globals_sys_basename}/buffalo';//globals_sys_basename应用根目录
var waitingImg = '/${globals_sys_basename}/images/oa/loading.gif';
var loadingImg = '/${globals_sys_basename}/images/oa/loading.gif';
var userId = '$!{user.getLoginname()}';
var deptId = '$!{user.getUnitid()}';
var alreadyOpenTableId = null;
var hrefBaseValue = null;
//HTTP://WWW.WIZZER.CN
function getUl(e) {
for (var i = 0; i < e.childNodes.length; i ++) {
if (e.childNodes[i].nodeName.toUpperCase() == "UL")return true;
}
return false;
}
function subMenu(e, menuId) {//动态增加下级菜单
if (getUl(e))return;
try {
var buffalo = new Buffalo(endPointTop);
buffalo.remoteCall("desktopService.getSubMenu", [userId,menuId], function(reply) {
//desktopService.getSubMenu ajax调用后台方法，传递用户名、一级栏目ID
var str = reply.getResult();//返回ArrayList对象或List对象
if (str.length>0) {
var ulElem = document.createElement("ul");
var temp = "";
ulElem.className = "MenuLevel2";
ulElem.ID = "MENU_" + menuId + "S";
ulElem.style.display = "";
for (var i = 0; i < str.length; i++) {
temp += "<li id='MENU_"+str[i].id+"' class='level2' onclick=\"subMenu(this,'" + str[i].id + "');menuClick(this);\" ><div>";
if (str[i].ext3 != null && str[i].ext3 != "") {
temp += "<img src='/$!globals_sys_basename/private/Icons/" + str[i].ext3 + "'>";//小图标
}
temp += "" + str[i].name + "</div></li>";
}
ulElem.innerHTML = temp;
e.appendChild(ulElem);
}
});
} catch (ex) {
}
}
function closeMenu() {
if (alreadyOpenTableId == null) return;
alreadyOpenTable = document.all(alreadyOpenTableId);
if (alreadyOpenTable.childNodes.length > 1){
targetTable = alreadyOpenTable.childNodes[1];
}else{return;}
targetTable.style.display = "none";
alreadyOpenTableId = null;
}
function menuClick(e) {
var currentTableSrc = e;
if (currentTableSrc.id != alreadyOpenTableId && currentTableSrc.id!=alreadyOpenTableId+"0001") closeMenu();
targetTableId = currentTableSrc.id + "S";
if (e.childNodes.length > 1){
targetTable = e.childNodes[1];
}else{targetTable=null;}
if (targetTable == null)return;
if (targetTable.style.display == "none") {
targetTable.style.display = '';
alreadyOpenTableId = currentTableSrc.id;
} else {
targetTable.style.display = "none";
}
}
</script>
<body style="margin: 0; padding: 0; overflow: auto; " marginwidth="0" topmargin="0" leftmargin="0" marginheight="0">
<ul id=MenuUl>
#foreach($obj in $list)//使用模板语言循环出第一级菜单
<li id="MENU_$!{obj.getId()}" onclick="subMenu(this,'$!{obj.getId()}');menuClick(this);"><div>#if(${obj.getExt3()})<img src="/$!globals_sys_basename/private/Icons/$!{obj.ext3}">#end $!{obj.getName()}</div>
</li>
#end
</ul>
</body>
</html>
menu.css样式表
body {
background: #d8edfc;
font-size: 12px;
font-family: 宋体;
scrollbar-base-color: #dbecf8;
scrollbar-arrow-color: #2a8ed1;
scrollbar-track-color: #bdddf2;
scrollbar-3dlight-color: #2886c5;
scrollbar-darkshadow-color: #2886c5;
scrollbar-face-color: #dbecf8;
scrollbar-shadow-color: #dbecf8;
margin: 1px;
border: 3px solid #4891c6;
}
#MenuUl {
list-style:none;
margin: 0px;
padding: 0px;
background: #d8ebf7;
}
ul.MenuLevel2 {
list-style:none;
margin: 0px;
padding: 0px;
background: #d8ebf7;
}
.level1 {
font-weight: bold;
color: #005790;
padding-bottom: 1px;
}
.level2 {
font-weight: normal;
color: #005790;
}
.level3Head {
font-weight: normal;
color: #2479b6;
width: 100%;
height: 21px;
padding-left: 61px;
padding-top: 4px;
background: url(images/menu_bg_head.gif) no-repeat;
cursor: hand;
}
.level33 {
font-weight: normal;
color: #2479b6;
width: 100%;
height: 21px;
padding-left: 61px;
padding-top: 4px;
background: url(images/menu_bg_3.gif) no-repeat;
cursor: hand;
}
.level32 {
font-weight: normal;
color: #2479b6;
width: 100%;
height: 21px;
padding-left: 61px;
padding-top: 4px;
background: url(images/menu_bg_2.gif) no-repeat;
cursor: hand;
}
.level1Style {
/*font-size:18px; */
width: 155px;
height: 24px;
background: url(images/menu_btn_bg.gif) no-repeat;
padding-left: 20px;
padding-top: 4px;
cursor: hand;
}
.level1SelectedStyle {
width: 155px;
height: 24px;
background: url(images/menu_btn_bg_selected.gif) no-repeat;
padding-left: 20px;
padding-top: 4px;
cursor: hand;
}
.level2Style {
width: 100%;
height: 20px;
background: #8ec4e9;
padding-left: 30px;
padding-top: 4px;
border-top: 1px solid #eff6fb;
cursor: hand;
}
本文地址：https://wizzer.cn/archives/571 , 转载请保留.