第四步：定义菜单外观
定义外观只需使用样式单即可，下面我们给出完整的例子，你完全可以拷贝、粘贴来看到本例子的效果！！[注意：浏览器必需是IE5+]。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
.menu{ cursor: hand;
display: none;
position: absolute;
top: 0; left: 0;
overflow: hidden;
background-color: "#CFCFCF";
border: "1 solid";
border-top-color: "#EFEFEF";
border-left-color: "#EFEFEF";
border-right-color: "#505050";
border-bottom-color: "#505050";
font: 10pt 宋体;
margin:0pt;padding: 2pt
}
.menu SPAN {width: 100%; cursor: hand; padding-left: 10pt}
.menu SPAN.selected {background: navy; color:white; cursor: hand}
</style>
<xml id="contextDef">
<xmldata>
<contextmenu id="demo">
<item id="viewsource" value="查看源文件"/>
<item id="back" value="后退……"/>
<item id="meng" value="访问【孟宪会之精彩世界】"/>
<item id="calculate" value="执行 JavaScript 代码"/>
</contextmenu>
<contextmenu id="demob">
<item id="菜单项例子1" value="菜单项例子1" />
<item id="菜单项例子2" value="菜单项例子2" />
</contextmenu>
</xmldata>
</xml>
<SCRIPT>
// 定义全局变量
var bContextKey=false;
function fnGetContextID(el) {
while (el!=null) {
if (el.contextmenu) return el.contextmenu
el = el.parentElement
}
return ""
}
function fnDetermine(){
oWorkItem=event.srcElement;
//键盘上的菜单键被按下时。
if(bContextKey==true){
//如果菜单的“状态”为“false”
if(oContextMenu.getAttribute("status")=="false"){
//捕获鼠标事件，以便和页面交互。
oContextMenu.setCapture();
//根据鼠标位置，确定菜单位置。
oContextMenu.style.top=event.clientY + document.body.scrollTop +
1;
oContextMenu.style.left=event.clientX + document.body.scrollLeft +
1;
oContextMenu.innerHTML="";
//设定菜单的“状态”为“true”
var sContext = fnGetContextID(event.srcElement)
if (sContext!="") {
fnPopulate(sContext)
oContextMenu.setAttribute("status","true");
event.returnValue=false;
}
else
event.returnValue=true
}
}
else{
// 如果键盘菜单键没有按下，并且菜单的“状态”为“true”。
if(oContextMenu.getAttribute("status")=="true"){
if((oWorkItem.parentElement.id=="oContextMenu") &&
(oWorkItem.getAttribute("component")=="menuitem")){
fnFireContext(oWorkItem)
}
// 当鼠标离开菜单或单击菜单项后，重设菜单（隐藏）
oContextMenu.style.display="none";
oContextMenu.setAttribute("status","false");
oContextMenu.releaseCapture();
oContextMenu.innerHTML="";
event.returnValue=false;
}
}
}
function fnPopulate(sID) {
var str=""
var elMenuRoot =
document.all.contextDef.XMLDocument.childNodes(0).selectSingle
Node('contextmenu[@id="' + sID + '"]')
if (elMenuRoot) {
for(var i=0;i<elMenuRoot.childNodes.length;i++)
str+='<span component="menuitem" menuid="' +
elMenuRoot.childNodes[i].getAttribute("id") +
'" id=oMenuItem' + i + '>' +
elMenuRoot.childNodes[i].getAttribute("value") +
"</SPAN><BR>"
oContextMenu.innerHTML=str;
oContextMenu.style.display="block";
oContextMenu.style.pixelHeight = oContextMenu.scrollHeight
}
}
function fnChirpOn(){
if((event.clientX>0) &&(event.clientY>0)
&&(event.clientX<document.body.offsetWidth)
&&(event.clientY<document.body.offsetHeight)){
oWorkItem=event.srcElement;
if(oWorkItem.getAttribute("component")=="menuitem"){
oWorkItem.className = "selected"
}
}
}
function fnChirpOff(){
if((event.clientX>0) && (event.clientY>0) &&
(event.clientX<document.body.offsetWidth) &&
(event.clientY<document.body.offsetHeight)){
oWorkItem=event.srcElement;
if(oWorkItem.getAttribute("component")=="menuitem"){
oWorkItem.className = ""
}
}
}
function fnInit(){
if (oContextMenu) {
oContextMenu.style.width=180;
oContextMenu.style.height=document.body.offsetHeight/2;
oContextMenu.style.zIndex=2;
//设置菜单样式
document.oncontextmenu=fnSuppress;
}
}
function fnInContext(el) {
while (el!=null) {
if (el.id=="oContextMenu") return true
el = el.offsetParent
}
return false
}
function fnSuppress(){
if (!(fnInContext(event.srcElement))) {
oContextMenu.style.display="none";
oContextMenu.setAttribute("status","false");
oContextMenu.releaseCapture();
bContextKey=true;
}
fnDetermine();
bContextKey=false;
}
function javameng(){
window.open("http://lucky.myrice.com","_blank","width=400,height=
400,top=20,left=20")
}
function fnFireContext(oItem) {
// 自定义上下文菜单项的功能
switch (oItem.menuid) {
case "viewsource":
location.href = "view-source:" + location.href
break;
case "back":
history.back()
break;
case "meng":
location.href="http://lucky.myrice.com"
break;
case "calculate":
javameng()
break;
default:
alert("你点击的菜单项是:\n\n\n" + oItem.menuid +"啊！！！")
}
}
</SCRIPT>
<BODY onload="fnInit()" onclick="fnDetermine()" bgcolor="#ccffcc">
<div status="false" onmouseover="fnChirpOn()" onmouseout="fnChirpOff()" id="oContextMenu" class="menu"></div>这里放你任意的其他的东西！ ...<br>... 这里放你任意的其他的东西！ ...<br>... 这里放你任意的其他的东西！ ...<br><br>
<P contextmenu="demo">这里是利用上下文菜单的里子！你把鼠标移动到这里，然后单击鼠标又键，可以看到菜单内容！<br>这里是利用上下文菜单的里子！你把鼠标移动到这里，然后单击鼠标又键，可以看到菜单内容！<br>这里是利用上下文菜单的里子！
你把鼠标移动到这里，然后单击鼠标又键，可以看到菜单内容！<br>这里是利用上下文菜单的里子！你把鼠标移动到这里，然后单击鼠标又键，可以看到菜单内容！<br>这里是利用上下文菜单的里子！你把鼠标移动到这里，然后单击鼠标又键，可以看到菜
单内容！<br></p><p>你也可以把鼠标放到下面的图象上面，点击又键?lt;p>
<center><IMG SRC="http://lucky.myrice.com/javabk1.jpg"
contextmenu="demob">
</body>
</html>
必须说明的是：你还可以自己定义菜单的无效[即变灰]的操作，也可以进一步定义更下一级的子菜单。这就只好留给你自己进行练习啦！：）
[返回] 中文XML论坛 - 专业的XML技术讨论区 →
XML.ORG.CN讨论区 - XML技术 → 『 DTD/XML Schema 』 → 用XML数据岛创建上下文菜单
(订阅本版)
2004/6/21 21:56:00
新浪微博
用XML数据岛创建上下文菜单
