[原创]Windows经典菜单框
*/ --------------------------------------------------------------------------------------*/ 出自： 编程中国 http://www.bc-cn.net
*/ 作者： islet E-mail：islet71@163.com QQ：4238114
*/ 时间： 2007-9-15 编程论坛首发
*/ 声明： 尊重作者劳动，转载请保留本段文字
*/ --------------------------------------------------------------------------------------
menu.xml:
<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>
<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>
win.html
<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"> </td>
</tr>
<tr onclick="menuFy()">
<td> </td>
</tr>
</table>
</body>
</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"> </td>
</tr>
<tr onclick="menuFy()">
<td> </td>
</tr>
</table>
</body>
</html>
menu.js:
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;
}
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;
}
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;
}
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;
}
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")+' '+o[j].getAttribute("key")+'</a></div>';
s += '</div>';
}
s += v[i].getAttribute("text")+'(<u>'+v[i].getAttribute("key")+'</u>)</div>';
m.innerHTML += s;
}
}
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")+' '+o[j].getAttribute("key")+'</a></div>';
s += '</div>';
}
s += v[i].getAttribute("text")+'(<u>'+v[i].getAttribute("key")+'</u>)</div>';
m.innerHTML += s;
}
}
menu.css:
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;
}
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;
}
[此贴子已经被作者于2007-9-15 13:31:58编辑过]
ThYXn4pw.rar
