纯js树型菜单
来源：互联网 发布：程序员入门知乎 编辑：程序博客网 时间：2024/05/16 05:55
<!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[i]=="0"){
GetObjById(priv_id[i]).style.display="";
}else{
if( (GetGrade(priv_id[i])==GetGrade(menu_id)&&GetUperGrade(priv_id[i])==GetUperGrade(menu_id)) || (GetUperGrade(priv_id[i])==menu_id) ){
GetObjById(priv_id[i]).style.display="";
}else{
GetObjById(priv_id[i]).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[i], "-");
if(priv_type[i]=="0"||priv_type[i]=="1"){
var sub_menu=CreateSubMenu(menu, "menu", priv_id[i], CombineChar(" ", grade)+"+ "+priv_name[i]);
AddEvent(sub_menu, "onclick", ChangeMenu, priv_id[i]);
AddEvent(sub_menu, "onmouseover", ActiveMenu, priv_id[i]);
AddEvent(sub_menu, "onmouseout", InactiveMenu, priv_id[i]);
}else{
var sub_menu=CreateSubMenu(menu, "menu", priv_id[i], CombineChar(" ", grade)+"- "+priv_name[i]);
if(priv_type[i]=="2"){
AddEvent(sub_menu, "onclick", OpenContent, priv_value[i]);
}else if(priv_type[i]=="3"){
AddEvent(sub_menu, "onclick", OpenContent1, priv_value[i]);
}
AddEvent(sub_menu, "onmouseover", ActiveMenu, priv_id[i]);
AddEvent(sub_menu, "onmouseout", InactiveMenu, priv_id[i]);
}
if(priv_type[i]!="0") GetObjById(priv_id[i]).style.display="none";
}
}else{
SetObjAttrib(menu, "menu_root", "menu_root", "您没有任何权限.");
}
//-->
</SCRIPT>
</BODY>
</HTML>
<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[i]=="0"){
GetObjById(priv_id[i]).style.display="";
}else{
if( (GetGrade(priv_id[i])==GetGrade(menu_id)&&GetUperGrade(priv_id[i])==GetUperGrade(menu_id)) || (GetUperGrade(priv_id[i])==menu_id) ){
GetObjById(priv_id[i]).style.display="";
}else{
GetObjById(priv_id[i]).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[i], "-");
if(priv_type[i]=="0"||priv_type[i]=="1"){
var sub_menu=CreateSubMenu(menu, "menu", priv_id[i], CombineChar(" ", grade)+"+ "+priv_name[i]);
AddEvent(sub_menu, "onclick", ChangeMenu, priv_id[i]);
AddEvent(sub_menu, "onmouseover", ActiveMenu, priv_id[i]);
AddEvent(sub_menu, "onmouseout", InactiveMenu, priv_id[i]);
}else{
var sub_menu=CreateSubMenu(menu, "menu", priv_id[i], CombineChar(" ", grade)+"- "+priv_name[i]);
if(priv_type[i]=="2"){
AddEvent(sub_menu, "onclick", OpenContent, priv_value[i]);
}else if(priv_type[i]=="3"){
AddEvent(sub_menu, "onclick", OpenContent1, priv_value[i]);
}
AddEvent(sub_menu, "onmouseover", ActiveMenu, priv_id[i]);
AddEvent(sub_menu, "onmouseout", InactiveMenu, priv_id[i]);
}
if(priv_type[i]!="0") GetObjById(priv_id[i]).style.display="none";
}
}else{
SetObjAttrib(menu, "menu_root", "menu_root", "您没有任何权限.");
}
//-->
</SCRIPT>
</BODY>
</HTML>
- 纯js树型菜单
- 纯js创建树形菜单
- 纯js三级联动菜单
- 纯JS实现出生日期[年月日]下拉菜单
- js树型菜单
- JS树型菜单
- js树型菜单
- js控制树型菜单
- 下拉菜单的实现，纯CSS实现下拉菜单 与 使用JS实现下拉菜单
- 纯div与css的弹出菜单 js技巧
- 一个纯js实现树
- js树型菜单的实现原理
- Div+CSS+JS树型菜单
- 风声JS菜单树
- 纯CSS菜单
- 纯CSS下拉菜单
- 纯CSS下拉菜单
- 纯CSS下拉菜单
- 修改xml的实例JS版
- ajax的验证用户
- 服务器端
- C#通过委托和异步调用实现窗体间的通讯
- I/O模型
- 纯js树型菜单
- RHEL4下配置HTTPS
- 查询每个月的第一天和最后一天
- Friends
- 在VC里实现WMI编程(取得MAC,Host,IP地址)
- 凉风起天末，君子意如何
- C++ string祥解
- web版即时聊天
- 简单 程序员
