程序博客网 > 淘宝上的腹肌贴有用吗

一个windows xp风格的多级菜单

来源：互联网 发布：淘宝上的腹肌贴有用吗 编辑：程序博客网 时间：2024/04/28 10:16

file:coolmenu1_0_2.js

//------------------------------------------------------------
// Copyright (c) 2003-2004 LeadinSoft. All rights reserved.
// Version 1.0.2
// Ahthor dolphin
//------------------------------------------------------------

//单个菜单的结构
function menu(mnuName,mnuText,mnuAlt,mnuIcon,mnuTarget,mnuKey,mnuType,mnuCmd){
 this.name   = mnuName;
 this.text = mnuText;
 this.alt = mnuAlt;
 this.icon = mnuIcon;
 this.target = mnuTarget;
 this.key = mnuKey;
 this.type = mnuType;
 this.cmd = mnuCmd;
}

//菜单组结构
function CMenu(mnuName){
 this.name = mnuName;
 this.menu = new Array();
}

function ActiveMenu(mnuID,mnuType){
 this.id   = mnuID;
 this.type = mnuType;
}

//打印主菜单(Main-CM)
function drawMainMenu(CM, width, height){
 var HTMLStr, posLeft, posTop, i;

 HTMLStr = "<div id='" + CM.name + "' class='CM_MainMenuBar' style='width:"+ width + ";height:"+ height + "'>";
 document.write(HTMLStr);
 
 var obj  = document.all(CM.name);
 posLeft  = obj.offsetLeft;
 posTop  = obj.offsetTop;
 var pobj = obj.offsetParent;
 while(pobj.tagName.toUpperCase() != "BODY"){
  posLeft += pobj.offsetLeft;
  posTop  += pobj.offsetTop;
  pobj =  pobj.offsetParent;
 }
 
 posLeft += 2;
 posTop  += 3;
 for(i=0; i<CM.menu.length; i++){
  HTMLStr = "<div id='" + CM.menu[i].name + "' nowrap class='CM_MainMenu' style='left:" + posLeft + ";top:" + posTop + ";height:21px' onmouseover='return CMM_Over(this,/"" + CM.menu[i].cmd + "/")' onmouseout='return CMM_Out(this)' " +
        "onclick='return CMM_Click(this,/"" + CM.menu[i].cmd + "/")' title='" + CM.menu[i].alt + "'>" + CM.menu[i].text;
  if(CM.menu[i].key != ""){
   HTMLStr += "(<u>" + CM.menu[i].key + "</u>)";
  }
  HTMLStr += "</div>";
  document.write(HTMLStr);
  posLeft += document.all.item(CM.menu[i].name).offsetWidth + 1;
 }

 HTMLStr = "</div>";
 document.write(HTMLStr); 
}

function drawSubMenu(CM){
 var HTMLStr, i, maxLn = 0;
 HTMLStr = "<div id='"+ CM.name +"' style='left:0px;top:0px;width:150px;overflow:hidden' class='CM_SubMenuBar'>";
 document.write(HTMLStr);

 for(i=0; i<CM.menu.length; i++){
  tmp = getTextLength(CM.menu[i].text);
  if(maxLn < tmp) maxLn = tmp;

  HTMLStr  = "<div id='"+ CM.menu[i].name +"' class='CM_SubMenu'"+
       " title='"+ CM.menu[i].alt +"'"+
       " onmouseover=/"CMS_Over(this,"+ CM.menu[i].type +",'"+ CM.menu[i].cmd +"')/""+
       " onmouseout=/"CMS_Out(this,"+ CM.menu[i].type +",'"+ CM.menu[i].cmd +"')/""+
       " onclick=/"CMS_Click(this,"+ CM.menu[i].type +",'"+ CM.menu[i].cmd +"')/">";
  HTMLStr += "<table border=0 cellspacing=0 cellpadding=0 width='100%' align='center'>";
  HTMLStr += "<tr nowrap height=20><td nowrap width=1></td>";
  HTMLStr += formatImage(CM.menu[i].icon,CM.menu[i].name);
  HTMLStr += "<td id='"+ CM.menu[i].name +"_text' class='CM_Text'>"+ CM.menu[i].text;
  if(CM.menu[i].key != ""){
   HTMLStr += "(<u>"+ CM.menu[i].key +"</u>)";
  }
  HTMLStr += "</td>";
  HTMLStr += "<td id='"+ CM.menu[i].name +"_sub' nowrap align=center width=16 class='CM_Sub'>";
  if(CM.menu[i].type == 0){
   HTMLStr += "<span class='SubFlag'>}</span>";
  }
  else{
   HTMLStr += "&nbsp;"
  }
  HTMLStr += "</td>"+
       "<td nowrap width=1 class='CM_Space'></td></tr></table></div>";

  document.write (HTMLStr);
 }

 HTMLStr = "</div>";
 document.write(HTMLStr);
 document.all.item(CM.name).style.width = maxLn*10+40;
 //test.value += document.all.item(CM.name).outerHTML;
}

function formatImage(mnuIcon, mnuName){
 var result = "<td id='"+ mnuName +"_ico' nowrap align=center width=20 class='CM_Icon'>";
 if(mnuIcon != ""){
  result += "<IMG SRC='"+ mnuIcon +"' BORDER='0'>";
 }
 else{
  result += "&nbsp;";
 }
 result += "</td>";

 return result;
}

function getTextLength(text){
    var ln = 0;
    for(var i=0; i<text.length; i++){
        if(text.charCodeAt(i) > 256){
          ln++;
        }
        ln++;
    }
    return ln;
}

function showMenu(mnuObj,mnuSubID){
 var l = mnuObj.offsetLeft - 1;
 var t = mnuObj.offsetTop + mnuObj.offsetHeight;
 document.all.item(mnuSubID).style.left = l; //设置子菜单位置
 document.all.item(mnuSubID).style.top  = t;  //设置子菜单的位置
 document.all.item("overline").style.left = l + 2;
 document.all.item("overline").style.top  = t;
 document.all.item("overline").style.width = mnuObj.offsetWidth - 2;
 document.all.item("overline").style.visibility = "visible";

 document.all.item(mnuSubID).style.visibility = "visible";   //显示子菜单
 g_actMenu[g_actMenu.length] = new ActiveMenu(mnuSubID,1);
 
 if(g_shadowStr != null){
  mnuObj.style.filter = g_shadowStr;
  document.all.item(mnuSubID).style.filter = g_shadowStr;
 }
}

function showSubMenu(mnuObj,mnuSubID){
 var l = mnuObj.parentElement.offsetLeft + mnuObj.offsetLeft + mnuObj.offsetWidth + 2;
 var t = mnuObj.parentElement.offsetTop + mnuObj.offsetTop + 1;

 var mnuSubObj = document.all.item(mnuSubID);
 if(l+mnuSubObj.offsetWidth>g_scrWidth)
  mnuSubObj.style.left = mnuObj.parentElement.offsetLeft - mnuSubObj.offsetWidth - 2;
 else
  mnuSubObj.style.left = l;
 if(t+mnuSubObj.offsetHeight>g_scrHeight)
  mnuSubObj.style.top = g_scrHeight - mnuSubObj.offsetHeight;
 else
  mnuSubObj.style.top = t;

 mnuSubObj.style.visibility = "visible";
 g_actMenu[g_actMenu.length] = new ActiveMenu(mnuSubID,1);
}

function CMM_Over(obj, cmd){
 if(!g_blnMMClick){
  obj.className = "CM_MainMenuOver";
  g_actMenu[g_actMenu.length] = new ActiveMenu(obj.id,0);
 }
 else{
  if(g_actMenu[0].id == obj.id) return;
  document.all.item(g_actMenu[0].id).className = "CM_MainMenu";
  for(var i=1;i<g_actMenu.length;i++){
   if (g_actMenu[i].type == 0) {
    document.all.item(g_actMenu[i].id + "_ico").className  = "CM_Icon";
    document.all.item(g_actMenu[i].id + "_text").className = "CM_Text";
    document.all.item(g_actMenu[i].id + "_sub").className  = "CM_Sub";
   }
   else{
    document.all.item(g_actMenu[i].id).style.visibility = "hidden";
   }
  }
  g_actMenu.length = 0;
  obj.className    = "CM_MainMenuClick";
  g_actMenu[g_actMenu.length] = new ActiveMenu(obj.id,0);
  showMenu(obj,cmd);
 }
}

function CMM_Out(obj){
 if(!g_blnMMClick){
  obj.className = "CM_MainMenu";
  g_actMenu.length --;
 }
}

function CMM_Click(obj,cmd){
 if(!g_blnMMClick){
  obj.className = "CM_MainMenuClick";
  showMenu(obj,cmd);
  g_blnMMClick = true;
 }
 else{
  document_click();
 }
 g_blnSMClick = true;

 if(!g_blnMMClick) CMM_Over(obj, cmd);
}

function CMS_Over(obj, type, cmd){
 for(var i=1;i<g_actMenu.length;i++){
  if(g_actMenu[i].id == obj.parentElement.id){
   for(var j=i+1;j<g_actMenu.length;j++){
    if(g_actMenu[j].type == 0){
     document.all.item(g_actMenu[j].id + "_ico").className  = "CM_Icon";
     document.all.item(g_actMenu[j].id + "_text").className = "CM_Text";
     document.all.item(g_actMenu[j].id + "_sub").className  = "CM_Sub";  
    }
    else{
     document.all.item(g_actMenu[j].id).style.visibility = "hidden";
    }
   }
   g_actMenu.length = i+1;
   break;
  }
 }
 
 g_actMenu[g_actMenu.length] = new ActiveMenu(obj.id,0);
 //showstatus();
 document.all.item(obj.id + "_ico").className  = "CM_IconOver";
 document.all.item(obj.id + "_text").className = "CM_TextOver";
 document.all.item(obj.id + "_sub").className  = "CM_SubOver";

 if(type == 0){
  showSubMenu(obj,cmd);
 }
 //showstatus();
}

function CMS_Out(obj, type, cmd){
 if(type != 0){
  document.all.item(obj.id + "_ico").className  = "CM_Icon";
  document.all.item(obj.id + "_text").className = "CM_Text";
  document.all.item(obj.id + "_sub").className  = "CM_Sub"; 
  
  if(g_actMenu.length > 0) g_actMenu.length --;
 }
 //showstatus();
}

function CMS_Click(obj, type, cmd){
 if(type == 1){
  document_click();
  document.all.item("overline").style.visibility = "hidden";
  lblMsg.innerText = cmd;
 }
 else{
  g_blnSMClick = true;
 }
}

function document_click(){
 if(g_blnSMClick){
  g_blnSMClick = false;
  return;
 }

 if(g_actMenu.length >0){
  for(var i=1; i<g_actMenu.length; i++){
   if(g_actMenu[i].type == 0){
    document.all.item(g_actMenu[i].id + "_ico").className  = "CM_Icon";
    document.all.item(g_actMenu[i].id + "_text").className = "CM_Text";
    document.all.item(g_actMenu[i].id + "_sub").className  = "CM_Sub"; 
   }
   else{
    document.all.item(g_actMenu[i].id).style.visibility = "hidden";
   }
  }
  document.all.item(g_actMenu[0].id).className = "CM_MainMenu";
  document.all.item("overline").style.visibility = "hidden";
 }
 g_actMenu.length = 0;
 g_blnMMClick = false;
}

function window_onload() {
 //初始化窗口尺寸
 g_scrHeight = window.document.body.offsetHeight;
 g_scrWidth  = window.document.body.offsetWidth;
}

function showstatus() {   //测试阶段用的函数，显示当前菜单ID数组内的内容
 lblMsg.innerText = "";
 for(var i=0;i<g_actMenu.length;i++) {
  lblMsg.innerText += g_actMenu[i].id + " > ";
 }
}

document.write("<div id='overline' class='CM_OverLine' style='left:100px;top:300px;width:100px;overflow:hidden'><table border=0 cellpadding=0 cellspacing=0 width='100%'><tr height=1><td width='100%' style='background-color:#EFEDDE' ></td></tr><tr height=1><td width='100%' style='background-color:menu' ></td></tr></table></div>");
var g_blnMMClick   = false;
var g_actMenu = new Array();
var g_scrWidth, g_scrHeight;
var g_blnSMClick = false;

document.body.onload = window_onload;
document.onclick = document_click;
var g_shadowStr = null;
//var g_shadowStr = "progid:DXImageTransform.Microsoft.Shadow(color='#888888', Direction=135, Strength=4)";

file:test1_0_2.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Test CoolMenu1.0.2 For JS</TITLE>
<style>
BODY{
 FONT-SIZE: 12px;
 MARGIN: 0px;
 FONT-FAMILY: Verdana, 宋体;

}

DIV.CM_MainMenuBar
{
  border-right: threedface 1px solid;
  border-left: threedface 1px solid;
  border-bottom: threedface 1px solid;
  border-top: threedface 1px solid;
  background-color: threedface;
  padding-top: 2px;
  padding-bottom: 1px;
  cursor: default;
}
DIV.CM_MainMenu
{
  border-right: threedface 1px solid;
  padding-right: 8px;
  border-top: threedface 1px solid;
  padding-left: 8px;
  padding-bottom: 0px;
  border-left: threedface 1px solid;
  cursor: default;
  padding-top: 3px;
  border-bottom: threedface 1px solid;
  position: absolute;
  background-color: threedface;
}
DIV.CM_MainMenuOver
{
  border-right: #316AC5 1px solid;
  padding-right: 8px;
  border-top: #316AC5 1px solid;
  padding-left: 8px;
  padding-bottom: 0px;
  border-left: #316AC5 1px solid;
  cursor: default;
  padding-top: 3px;
  border-bottom: #316AC5 1px solid;
  position: absolute;
  background-color: #C1D2EE;
}

DIV.CM_MainMenuClick{
  border-right: #8A867A 1px solid;
  padding-right: 8px;
  border-top: #8A867A 1px solid;
  padding-left: 8px;
  padding-bottom: 1px;
  border-left: #8A867A 1px solid;
  cursor: default;
  padding-top: 3px;
  position: absolute;
  background-color: #EFEDDE;
}

DIV.CM_SubMenu TD
{
  font-size: 12px;
}
DIV.CM_SubMenuBar
{
  color: #000000;
  font-size: 12px;
  border-right: appworkspace 1px solid;
  border-top: appworkspace 1px solid;
  border-left: appworkspace 1px solid;
  border-bottom: appworkspace 1px solid;
  font-family: Verdana, 宋体;
  position: absolute;
  visibility: hidden;
  background-color: buttonface;
  margin-left: 1px;
  margin-right: 1px;
  padding-top: 1px;
  padding-bottom: 1px;
}

DIV.CM_SubMenu
{
  cursor: default;
}

DIV.CM_OverLine{
  position: absolute;
  visibility: hidden;
  z-index:100;
  margin: 0px;
}

SPAN.SubFlag{
 font-size: 13px;
  text-align: right;
 cursor:default;
 font-family:"Wingdings 3";
}

TD.CM_Icon
{
  border-top: buttonface 1px solid;
  border-left: buttonface 1px solid;
  border-bottom: buttonface 1px solid;
  background-color: buttonface;
}

TD.CM_IconOver{
  border-top: #316AC5 1px solid;
  border-left: #316AC5 1px solid;
  border-bottom: #316AC5 1px solid;
  border-right-width: 1px;
  background-color: #C1D2EE;
}

TD.CM_Text
{
 padding-right: 2px;
 padding-left: 5px;
 padding-top: 2px;
 border-top: menu 1px solid;
 border-bottom: menu 1px solid;
 background-color: menu;
}

TD.CM_TextOver{
  padding-right: 2px;
  padding-left: 5px;
  padding-top: 2px;
  border-top: #316AC5 1px solid;
  border-bottom: #316AC5 1px solid;
  background-color: #C1D2EE;
}

TD.CM_Sub
{
  border-right: menu 1px solid;
  border-top: menu 1px solid;
  border-bottom: menu 1px solid;
  background-color: menu;
  text-align:center
}
TD.CM_SubOver
{
  border-right: #316AC5 1px solid;
  border-top: #316AC5 1px solid;
  border-bottom: #316AC5 1px solid;
  background-color: #C1D2EE;
  text-align:center;
}

TD.CM_Space{
  background-color: menu;
}
</style>
</HEAD>

<BODY>
<!-- <TEXTAREA id="test" ROWS="5" COLS="50"></TEXTAREA>
 --><br>
<span id="lblMsg">&nbsp;</span>
<br>
<p>
<SCRIPT LANGUAGE="JavaScript" src="coolmenu1_0_2.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!--
var mnuMain = new CMenu("mnuMain");   
mnuMain.menu[0] = new menu("mnuMainNL","无名谷","Noteless Valley","","","",0,"mnuNL");
mnuMain.menu[1] = new menu("mnuMainSiteAdmin","网站管理","网站管理","","","",0,"mnuSiteAdmin");
mnuMain.menu[2] = new menu("mnuMainSystem","系统管理","系统管理","","","",0,"mnuSystem");
mnuMain.menu[3] = new menu("mnuMainShow","演示菜单","Menu Show","","","",0,"mnuShow");

drawMainMenu(mnuMain,"100%",27);

var mnuNL = new CMenu("mnuNL");
mnuNL.menu[0] = new menu("mnuHomePage","首页","HomePage","","","",1,"http://lijun.org");
mnuNL.menu[1] = new menu("mnuDesign","网页设计","Design","images/i.p.edit.gif","","",1,"http://lijun.org/article.asp?topic=1");
mnuNL.menu[2] = new menu("mnuProgram","网络编程","Program","images/i.p.cont.individual.gif","","",1,"http://lijun.org/article.asp?topic=2");
mnuNL.menu[3] = new menu("mnuOthers","其它文章","Others","","","",1,"http://lijun.org/article.asp?topic=3");

drawSubMenu(mnuNL);

var mnuSiteAdmin = new CMenu("mnuSiteAdmin")
mnuSiteAdmin.menu[0] = new menu("mnuAddressUpdate","访问地区更新","访问地区更新","","","",1,"AddressUpdate.asp");

drawSubMenu(mnuSiteAdmin);

 var mnuSystem = new CMenu("mnuSystem");
 mnuSystem.menu[0] = new menu("mnuSysUser","用户管理","用户管理","","","",1,"userAdmin.asp");
 mnuSystem.menu[1] = new menu("mnuSysAuthority","权限管理","权限管理","","","",1,"authority.asp");
 mnuSystem.menu[2] = new menu("mnuSysPwdChange","口令修改","口令修改","","","",1,"chgpwd.asp");
 mnuSystem.menu[3] = new menu("mnuSysHelp","帮助","帮助","","","",1,"help.asp");
 mnuSystem.menu[4] = new menu("mnuSysAbout","关于本系统","关于本系统","","","",1,"about.asp");
 mnuSystem.menu[5] = new menu("mnuSysExit","退出本系统","退出系统","","","",1,"quit.asp");

 drawSubMenu(mnuSystem);

var mnuShow = new CMenu("mnuShow");
 mnuShow.menu[0] = new menu("mnuShow1","演示菜单一","Menu Show 1","images/i.p.trash.gif","","",1,"menushow1.asp");
 mnuShow.menu[1] = new menu("mnuShow2","演示菜单二","Menu Show 2","images/i.p.new.gif","","",1,"mnuShow_2");
 mnuShow.menu[2] = new menu("mnuShow3","演示菜单三","Menu Show 3","","","",1,"menushow3.asp");
 mnuShow.menu[3] = new menu("mnuShow4","演示菜单四","Menu Show 4","","","",1,"menushow4.asp");
 mnuShow.menu[4] = new menu("mnuShow5","演示菜单五","Menu Show 5","","","",0,"mnuShow_2");

 drawSubMenu(mnuShow);

 var mnuShow_2 = new CMenu("mnuShow_2");
 mnuShow_2.menu[0] = new menu("mnuShow21","演示菜单二一","Menu Show 2.1","","","",1,"menushow21.asp");
 mnuShow_2.menu[1] = new menu("mnuShow22","演示菜单二二","Menu Show 2.2","images/i.p.cont.group.gif","","",0,"mnuShow_22");
 mnuShow_2.menu[2] = new menu("mnuShow23","演示菜单二三","Menu Show 2.3","","","",1,"menushow23.asp");
 mnuShow_2.menu[3] = new menu("mnuShow24","演示菜单二四","Menu Show 2.4","","","",1,"mnuShow_22");
 mnuShow_2.menu[4] = new menu("mnuShow25","演示菜单二五","Menu Show 2.5","","","",1,"menushow25.asp");

 drawSubMenu(mnuShow_2);

 var mnuShow_22 = new CMenu("mnuShow_22");
 mnuShow_22.menu[0] = new menu("mnuShow221","演示菜单二二一","Menu Show 2.2.1","images/i.p.search.gif","","",1,"menushow221.asp");
 mnuShow_22.menu[1] = new menu("mnuShow222","演示菜单二二二","Menu Show 2.2.2","images/i.p.putinfolder.gif","","",0,"mnushow_222");
 mnuShow_22.menu[2] = new menu("mnuShow223","演示菜单二二三","Menu Show 2.2.3","images/i.p.folder.sent.gif","","",1,"menushow223.asp");

 drawSubMenu(mnuShow_22);

 var mnuShow_222 = new CMenu("mnuShow_222");
 mnuShow_222.menu[0] = new menu("mnuShow2221","演示菜单二二二一","Menu Show 2.2.2.1","","","",1,"menushow2221.asp");
 mnuShow_222.menu[1] = new menu("mnuShow2222","演示菜单二二二二","Menu Show 2.2.2.2","","","",1,"menushow2222.asp");
 mnuShow_222.menu[2] = new menu("mnuShow2223","演示菜单二二二三","Menu Show 2.2.2.3","images/i.p.junkmail.gif","","",1,"menushow2223.asp");

 drawSubMenu(mnuShow_222);
//-->
</SCRIPT>
</p>
</BODY>
</HTML>
msn：haitengyu@hotmail.com

淘宝上的腹肌贴有用吗 淘宝上的腹肌贴有用吗
原创粉丝点击
热门IT博客
芒种日期算法芒种日期算法
建筑工程资料员软件建筑工程资料员软件
王思聪大骂林更新知乎
sql查重复记录
水果网络批发市场
怎样关闭淘宝网店
鉴于每次avmoo换域名
百度自然排名优化费用
淘宝发红包的钱在哪里
淘宝上的紫晶洞真假
人工智能 硅基生命
无人机传感器数据测试
小米网络音响app连不上
乐视手机清除数据
淘宝上哪家卖红酒靠谱
复杂网络鲁棒性
编程中什么是栈
巫师3正版优化
全国地区信息 数据库
拍爱心的软件
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 怎么样给女朋友惊喜 怎么给女友生日惊喜 给男朋友的生日惊喜 女朋友生日送什么惊喜 怎么给朋友生日惊喜 女朋友过生日的惊喜 老公生日送什么惊喜呢 女生喜欢什么样的惊喜 如何给女朋友制造惊喜 惊奇队长 惊奇近义词 无限惊奇 惊奇手札 拍案惊奇 惊奇意思 惊奇 惊奇的意思 刻拍案惊奇 骨骼惊奇 惊奇跑酷 惊奇反义词 惊奇剑士 惊奇英文 惊奇队长2 惊奇的英文 惊奇英语 中国惊奇 中国惊奇先 惊奇的 惊奇的近义词 惊奇队长免费版完整 惊奇队长在线完整观看超清版 惊奇队长在线播放 惊奇队长高清完整免费版 三老爷惊奇手札 惊奇队长观看 惊奇队长图片 惊奇手札鬼罗莉 中国先生惊奇先生 惊奇手札鬼萝莉 二刻拍案惊奇

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里