1:http://www.csdn.net/expert/topic/641/641130.xml?temp=.2268946
2:http://www.csdn.net/expert/topic/644/644653.xml?temp=.9513208
2:http://www.csdn.net/expert/topic/644/644653.xml?temp=.9513208
解决方案 »
- 求解如何将json数据传给后台
- 求各位大侠了。。javascript 权威指南18-3 表单验证?validate 但是第一个文本框无法输入正确格式 求指正
- 请教一个在FireFox浏览器中js脚本的写法
- javascript怎样把所有script标签移动到body最后面?
- javaScript 如何讀寫XML文件
- 怎么用js 实现 站内 某个文件夹下的 静态页面搜索
- 如何做出像cctv主页那样的版块拖动效果?
- 如何让一个tedit控件只能输入数字啊?
- javascript提交时,传送对象到另一个页面!
- 点击父节点,而选中其所有子节点,年纪大了,脑子不好使,请帮帮忙
- 如何控制整个页面上全部控件的有效性?
- 在哪里有javascript的电子书下载
<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).selectSingleNode('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>你也可以把鼠标放到下面的图象上面,点击又键!<p>
<center><IMG SRC="http://lucky.myrice.com/javabk1.jpg"
contextmenu="demob">
</body>
</html>