純js樹型菜單
<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>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章