[原创]Windows经典菜单框(页 1) - JavaScript论坛

islet 发表于 2007-9-15 13:26

[原创]Windows经典菜单框

*/ -------------------------------------------------------------------------------------- */ 出自：编程中国 http://www.bc-cn.net */ 作者： islet E-mail：islet71@163.com QQ：4238114 */ 时间： 2007-9-15 编程论坛首发 */ 声明：尊重作者劳动，转载请保留本段文字 */ -------------------------------------------------------------------------------------- menu.xml: 
<DIV class=htmlcode><menu> <m1 key="F" text="文件"> <m2 key="Ctrl+N" href="" text="新建" /> <m2 key="Ctrl+O" href="" text="打开" /> <m2 key="Ctrl+S" href="" text="保存" /> <m2 key="Ctrl+C" href="exit" text="退出" /> </m1> <m1 key="E" text="编辑"> <m2 key="Ctrl+C" href="" text="复制" /> <m2 key="Ctrl+X" href="" text="剪切" /> <m2 key="Ctrl+V" href="" text="粘贴" /> <m2 key="Ctrl+A" href="" text="全选" /> </m1> <m1 key="V" text="查看"> <m2 key="" href="" text="大" /> <m2 key="" href="" text="中" /> <m2 key="" href="" text="小" /> </m1> <m1 key="T" text="工具"> <m2 key="" href="" text="大" /> <m2 key="" href="" text="中" /> <m2 key="" href="" text="小" /> </m1> </menu> </DIV> win.html 
<DIV class=htmlcode><html> <title>测试框架</title> <script language="javascript" src="menu.js"></script> <link href="menu.css" rel="stylesheet" type="text/css" /> <body onload="Load()"> <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="25" valign="middle" bgcolor="#D4D0C8" class="winbord"><div id="menu" style="width:100%"></div></td> </tr> <tr onclick="menuFy()"> <td height="25" bgcolor="#D4D0C8" class="winbord">&nbsp;</td> </tr> <tr onclick="menuFy()"> <td>&nbsp;</td> </tr> </table> </body> </html></DIV> menu.js: 
<DIV class=htmlcode>var menuClass="menuover"; function menuClick(m){ menuClass="menudown"; menuPlay(m); } function menuOver(m){ m.className=menuClass; var o=document.getElementById('menu').childNodes; for(var i=0;i<o.length;i++){ if(o[i]!=m) menuDisplay(o[i]); } if(m.className=="menudown") menuPlay(m); } function menuOut(m){ if(m.className=='menuover') m.className='menu'; } function menuFy(){ menuClass='menuover'; var m=document.getElementById('menu').childNodes; for(var i=0;i<m.length;i++){menuDisplay(m[i])} } function menuDisplay(m){ m.className='menu'; m.childNodes[0].style.display='none'; } function menuPlay(m){ m.className='menudown'; m.childNodes[0].style.display=''; } function goTo(o,url){ o.blur(); if(url=="exit") window.close(); return false; }</DIV>
<DIV class=htmlcode>loadXML = function(xmlFile){ var xmlDoc; if(window.ActiveXObject){ xmlDoc = new ActiveXObject('Microsoft.XMLDOM'); xmlDoc.async = false; xmlDoc.load(xmlFile); } else if (document.implementation&&document.implementation.createDocument){ xmlDoc = document.implementation.createDocument('', '', null); xmlDoc.load(xmlFile); } else { return null; } return xmlDoc; }</DIV>
<DIV class=htmlcode>checkXMLDocObj= function(xmlFile){ var xmlDoc = loadXML(xmlFile); if(xmlDoc==null){ alert('您的浏览器不支持xml文件读取,推荐使用IE5.0以上可以解决此问题!'); window.location.href='/Index.aspx'; } return xmlDoc; } function Load(){ var m=document.getElementById('menu'),o=null; var xmlDoc = checkXMLDocObj('menu.xml'); var v = xmlDoc.getElementsByTagName('menu/m1'); var s=""; for(var i=0;i<v.length;i++){ s='<div class="menu" onclick="menuClick(this)" onmouseover="menuOver(this)" onmouseout="menuOut(this)">'; if(v[i].childNodes){ o=v[i].childNodes; s += '<div style="display:none;" class="fmenu">'; for(var j=0;j<o.length;j++) s += '<div><a href="to:'+o[j].getAttribute("text")+'" onclick="return goTo(this,\''+o[j].getAttribute("href")+'\')">'+o[j].getAttribute("text")+'&nbsp;&nbsp;&nbsp;&nbsp;'+o[j].getAttribute("key")+'</a></div>'; s += '</div>'; } s += v[i].getAttribute("text")+'('+v[i].getAttribute("key")+')</div>'; m.innerHTML += s; } }</DIV> menu.css: 
<DIV class=htmlcode>body { font-size: 12px; background-color: #FFFFFF; margin: 0px; } .winbord { font-size: 12px; border-bottom-width: 1px; border-bottom-style: solid; border-top-width: 1px; border-right-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-left-style: solid; border-top-color: #FFFFFF; border-right-color: #808080; border-bottom-color: #808080; border-left-color: #FFFFFF; cursor: default; } .menu { margin: 0px; border: 1px solid #D4D0C8; font-size: 12px; float: left; padding-right: 4px; padding-left: 4px; width: 60; text-align: center; line-height: 21px; cursor: default; } .menuover { margin: 0px; font-size: 12px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #FFFFFF; border-right-color: #808080; border-bottom-color: #808080; border-left-color: #FFFFFF; width: 60; text-align: center; height: 21px; line-height: 21px; float: left; padding-right: 4px; padding-left: 4px; cursor: default; } .menudown { margin: 0px; font-size: 12px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #808080; border-right-color: #FFFFFF; border-bottom-color: #FFFFFF; border-left-color: #808080; width: 60; text-align: center; height: 21px; line-height: 21px; float: left; padding-right: 4px; padding-left: 4px; cursor: default; } .fmenu { position:absolute; z-index:1; background-color: #D4D0C8; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #FFFFFF; border-left-color: #FFFFFF; border-right-color: #808080; border-bottom-color: #808080; font-size: 12px; line-height: 20px; margin-top: 20px; margin-left: -9px; text-align: left; white-space:nowrap; padding: 1px; }a:link { color: #000000; text-decoration: none; background-color: #D4D0C8; width: 100%; font-size: 12px; line-height: 20px; padding-right: 15px; padding-left: 15px; } a:visited { color: #000000; text-decoration: none; background-color: #D4D0C8; width: 100%; line-height: 20px; padding-right: 15px; padding-left: 15px; } a:hover { color: #FFFFFF; text-decoration: none; background-color: #363A69; width: 100%; line-height: 20px; padding-right: 15px; padding-left: 15px; } </DIV>
[align=right][color=#000066][此贴子已经被作者于2007-9-15 13:31:58编辑过][/color][/align]

islet 发表于 2007-9-15 13:38

[attach]27553[/attach]

madpbpl 发表于 2007-9-15 16:28

楼上的水平是越来越高了,做的很不错,支持一下!

zacom 发表于 2008-2-18 23:34

头痛的要死

hoddog 发表于 2008-2-28 22:03

不错,我顶

不错,我顶,收藏,经典.

hoddog 发表于 2008-2-28 22:05

不错,我顶

不错,我顶,收藏.经典.

渚薰发表于 2008-2-29 08:48

现在水平高固然好，我的观点是，不要再重复劳动发明轮子了，留着精力创造更加完善的产品代码吧。如果lz需要用到任何UI的东西，请看看这个www.extjs.com

页: [1]