纯javascript树型菜单
2007-05-23 10:40
另存为web页 <!-- =========================================================================================== * * Copyright (c) 2005, DINNER3000 工作室 * All rights reserved. * * 文件名称：template.html * 文件标识： * 摘 要：HTML标准模板 * 作 者：dinner3000 * 修 改 者： * 修改内容： * 修改时间： * 版 本：2005-5-12 * $Id$ * =========================================================================================== --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <meta http-equiv="content-type" content="text/html; charset=([$_CHARSET_])"> <TITLE> 菜单 </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <link rel=stylesheet href="([$_CSSINC_])" type="text/css"> <style> body { font-family: arial, 宋体, serif; font-size:14px; } tr.unchanged { } tr.changed { background-color: #CC3300 } div.active { background-color: #00CC66; cursor: hand } div.inactive{ } div.active1 { cursor: hand } </style> </HEAD> <body> <SCRIPT LANGUAGE="JavaScript" type="text/javascript"> <!-- //([$_ARRAY_]) var priv_id=new Array("0", "0-0", "0-1", "1", "1-0", "2", "2-0", "2-0-0", "2-1", "2-1-0"); var priv_name=new Array("用户管理", "添加用户", "权限变更", "系统管理", "系统权限管理", "信息系统功能一", "点击流分析", "用户热点路径分析", "点击图分析", "用户热点点击分析"); var priv_value=new Array("###", "/php_test/admin_adduser.php", "/php_test/admin_moduser.php", "###", "/php_test/admin_modsyspriv.php", "###", "##", "#", "##", "#"); var priv_type=new Array("0", "2", "2", "0", "2", "0", "1", "2", "1", "2"); //注:上面的4个数组确定了菜单属性. priv_id为菜单项目代码, 用以确定菜单层级关系; priv_name为显示名称; priv_value为菜单链接; priv_type为构建菜单时的辅助变量, 0-主键, 1-副键, 2-系统链接, 3-外部链接 function GetObjById(obj_id){ return document.getElementById(obj_id); } function CreatObj(obj_tag){ return document.createElement(obj_tag); } function SetObjAttrib(obj, obj_name, obj_id, obj_text, obj_class){ obj.name=obj_name; obj.id=obj_id; if(obj_text) obj.innerText=obj_text; if(obj_class) obj.className=obj_class; } function AddEvent(obj, event, func, param){ var aaa=obj; var _st = aaa.attachEvent; aaa.attachEvent = function(md,fr) { if(typeof fr == 'function'){ var argu = Array.prototype.slice.call(arguments,2); var f = (function(){ fr.apply(null,argu); }); return _st(md,f); } return _st(md,fr); } aaa.attachEvent(event, func, param); aaa.appendChild(obj); } function CreateSubMenu(menu_root, menu_name, menu_id, menu_text, menu_class){ var sub_menu=CreatObj("div"); SetObjAttrib(sub_menu, menu_name, menu_id, menu_text, menu_class); menu_root.appendChild(sub_menu); return sub_menu; } function ShowName(param){ alert(param); } function ChangeMenu(menu_id){ for(var i=0; i<priv_id.length; i++){ if(priv_type=="0"){ GetObjById(priv_id).style.display=""; }else{ if( (GetGrade(priv_id)==GetGrade(menu_id)&&GetUperGrade(priv_id)==GetUperGrade(menu_id)) || (GetUperGrade(priv_id)==menu_id) ){ GetObjById(priv_id).style.display=""; }else{ GetObjById(priv_id).style.display="none"; } } } } function ActiveMenu(menu_id){ //alert(GetObjById(menu_id).id+" active"); GetObjById(menu_id).className="active"; } function InactiveMenu(menu_id){ //alert(GetObjById(menu_id).id+" inactive"); GetObjById(menu_id).className="inactive"; } function ActiveMenu1(menu_id){ //alert(GetObjById(menu_id).id+" active"); GetObjById(menu_id).className="active1"; } function InactiveMenu1(menu_id){ //alert(GetObjById(menu_id).id+" inactive"); GetObjById(menu_id).className="inactive1"; } function OpenUrl(_url, _target){ // alert(_url+" => "+_target); window.open(_url, _target) } function Logout(_url){ OpenUrl(_url, "_parent"); } function OpenContent(_url){ OpenUrl("([$_SYSTEMROOT_])"+_url, "content"); } function OpenContent1(_url){ OpenUrl(_url, "content"); } function CountChar(str, tag){ var ret=0; for(var i=0; i<str.length; i++){ if(str.charAt(i)==tag){ ret++; } } return ret; } function CombineChar(tag, n){ var ret=""; for(var i=0; i<n; i++){ ret+=tag; } return ret; } function GetGrade(str){ return CountChar(str, "-"); } function GetUperGrade(str){ if(str.indexOf("-")!=-1){ return str.substr(0, str.lastIndexOf("-")); }else{ return str; } } function GetRootGrade(str){ if(str.indexOf("-")!=-1){ return str.substr(0, str.indexOf("-")); }else{ return str; } } var login=CreatObj("div"); SetObjAttrib(login, "login", "login", "欢迎 ([$_USERNAME_]) !"); AddEvent(login, "onmouseover", ActiveMenu1, "login"); AddEvent(login, "onmouseout", InactiveMenu1, "login"); document.body.appendChild(login); var menu=CreatObj("div"); SetObjAttrib(menu, "menu_root", "menu_root"); document.body.appendChild(menu); var logout=CreatObj("div"); SetObjAttrib(logout, "logout", "logout", "安全退出"); AddEvent(logout, "onclick", Logout, "([$_PAGELOGOUT_])"); AddEvent(logout, "onmouseover", ActiveMenu, "logout"); AddEvent(logout, "onmouseout", InactiveMenu, "logout"); document.body.appendChild(logout); var grade; if(priv_id.length!=0){ for(var i=0; i<priv_id.length; i++){ grade=CountChar(priv_id, "-"); if(priv_type=="0"||priv_type=="1"){ var sub_menu=CreateSubMenu(menu, "menu", priv_id, CombineChar(" ", grade)+"+ "+priv_name); AddEvent(sub_menu, "onclick", ChangeMenu, priv_id); AddEvent(sub_menu, "onmouseover", ActiveMenu, priv_id); AddEvent(sub_menu, "onmouseout", InactiveMenu, priv_id); }else{ var sub_menu=CreateSubMenu(menu, "menu", priv_id, CombineChar(" ", grade)+"- "+priv_name); if(priv_type=="2"){ AddEvent(sub_menu, "onclick", OpenContent, priv_value); }else if(priv_type=="3"){ AddEvent(sub_menu, "onclick", OpenContent1, priv_value); } AddEvent(sub_menu, "onmouseover", ActiveMenu, priv_id); AddEvent(sub_menu, "onmouseout", InactiveMenu, priv_id); } if(priv_type!="0") GetObjById(priv_id).style.display="none"; } }else{ SetObjAttrib(menu, "menu_root", "menu_root", "您没有任何权限."); } //--> </SCRIPT> </BODY> </HTML> |
TAG:
评分(
