Buffalo 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;
}

801 total views, 1 views today

发表评论

电子邮件地址不会被公开。 必填项已用*标注