当前位置:编程学习 > JAVA >>

JS高手看看吧,我想把这个改成点击一段文字后出来右键菜单

<!DOCTYPE html> 
<html> 
<head> 
<title>右键菜单</title> 
<style> 
<!-- 
body{background: #222; font: 14px 'Microsoft Yahei', Arial;} 
ul,li{list-style: none;padding:0;margin:0;} 
a{text-decoration: none;color:#000;} 
#wrap { 
width: 800px; 
height: 550px; 
border:1px solid #FF9C00; 
background: #F0E6AF; 
position:relative; 
margin: .5em auto; 

#wrap ul { 
background: #eee; 
border: 1px solid #999; 
width: 150px; 
position: absolute; 
display: none; 
-moz-box-shadow: 3px 3px 9px #999; 
-webkit-box-shadow: 3px 3px 9px #999; 
-o-box-shadow: 3px 3px 9px #999; 
box-shadow: 3px 3px 9px #999; 

#wrap ul li { 
border-bottom: 1px solid #ddd; 
line-height: 24px; 

#wrap li.no {border-bottom: none;} 
#wrap ul li a { 
display: block; 
padding-left: .5em; 

#wrap ul li a:hover { 
background-color: #FFBD00; 

--> 
</style> 
<script type="text/javascript"> 
//<![CDATA[ 
function $(id) { 
return document.getElementById(id); 
}; 

var EventUnit = { 
addHandler: function(element, type, handler) {//添加事件处理程序 
if(element.addEventListener) { 
element.addEventListener(type, handler, false); 
} else if(element.attachEvent) { 
element.attachEvent('on' + type, handler); 
} else { 
element['on' + type] = handler; 
}; 
}, 
getEvent: function(event) { 
return event ? event : window.event; 
}, 
preventDefault: function(event) {//取消事件默认动作 
if(event.preventDefault) { 
event.preventDefault(); 
} else { 
event.returnValue = false; 
}; 



EventUnit.addHandler(window, 'load', function() { 
var wrap = $('wrap'); 
var menu = $('menu'); 
var menuStyle = menu.style.display; 
var x = wrap.offsetLeft + wrap.clientWidth, y = wrap.offsetTop + wrap.clientHeight; 
var w = 0, h = 0; 
var left = 0, top = 0; 

EventUnit.addHandler(wrap, 'contextmenu', function(event) { 
event = EventUnit.getEvent(event); 
EventUnit.preventDefault(event); 

menu.style.display = 'block'; 
w = menu.clientWidth; 
h = menu.clientHeight; 
left = (x - event.clientX >= w) ? event.clientX - wrap.offsetLeft : event.clientX - wrap.offsetLeft - w; 
top = (event.clientY + h <= y) ? event.clientY - wrap.offsetTop : event.clientY - wrap.offsetTop - h; 
menu.style.left = left + 'px'; 
menu.style.top = top + 'px'; 
}); 

EventUnit.addHandler(document, 'click', function() { 
menu.style.display = menuStyle; 
}); 
}); 
//]]> 
</script> 
</head> 

<body> 
<div id="wrap"> 
<p>单击右键看效果~</p> 
<ul id="menu"> 
<li><a href="#">撤销</a></li> 
<li><a href="#">重做</a></li> 
<li><a href="#">复制</a></li> 
<li><a href="#">粘贴</a></li> 
</ul> 
</div> 
</body> 
</html> JavaScript 右按键菜单 连接 HTML 函数 --------------------编程问答-------------------- <!DOCTYPE html> 
 <html> 
 <head> 
 <title>右键菜单</title> 
 <style> 
 <!-- 
 body{background: #222; font: 14px 'Microsoft Yahei', Arial;} 
 ul,li{list-style: none;padding:0;margin:0;} 
 a{text-decoration: none;color:#000;} 
 #wrap { 
 width: 800px; 
 height: 550px; 
 border:1px solid #FF9C00; 
 background: #F0E6AF; 
 position:relative; 
 margin: .5em auto; 
 } 
 #wrap ul { 
 background: #eee; 
 border: 1px solid #999; 
 width: 150px; 
 position: absolute; 
 display: none; 
 -moz-box-shadow: 3px 3px 9px #999; 
 -webkit-box-shadow: 3px 3px 9px #999; 
 -o-box-shadow: 3px 3px 9px #999; 
 box-shadow: 3px 3px 9px #999; 
 } 
 #wrap ul li { 
 border-bottom: 1px solid #ddd; 
 line-height: 24px; 
 } 
 #wrap li.no {border-bottom: none;} 
 #wrap ul li a { 
 display: block; 
 padding-left: .5em; 
 } 
 #wrap ul li a:hover { 
 background-color: #FFBD00; 
 } 
 --> 
 </style> 
 <script type="text/javascript"> 
 //<![CDATA[ 
 function $(id) { 
 return document.getElementById(id); 
 }; 
 
var EventUnit = { 
 addHandler: function(element, type, handler) {//添加事件处理程序 
 if(element.addEventListener) { 
 element.addEventListener(type, handler, false); 
 } else if(element.attachEvent) { 
 element.attachEvent('on' + type, handler); 
 } else { 
 element['on' + type] = handler; 
 }; 
 }, 
 getEvent: function(event) { 
 return event ? event : window.event; 
 }, 
 preventDefault: function(event) {//取消事件默认动作 
 if(event.preventDefault) { 
 event.preventDefault(); 
 } else { 
 event.returnValue = false; 
 }; 
 } 
 } 
 
EventUnit.addHandler(window, 'load', function() { 
 var wrap = $('wrap'); 
 var menu = $('menu'); 
 var menuStyle = menu.style.display; 
 var x = wrap.offsetLeft + wrap.clientWidth, y = wrap.offsetTop + wrap.clientHeight; 
 var w = 0, h = 0; 
 var left = 0, top = 0; 
 
EventUnit.addHandler(wrap, 'contextmenu', function(event) { 
 event = EventUnit.getEvent(event); 
 EventUnit.preventDefault(event); 
 });
 
EventUnit.addHandler($('obj'), 'contextmenu', function(event) { 
 event = EventUnit.getEvent(event); 
 EventUnit.preventDefault(event); 
 
menu.style.display = 'block'; 
 w = menu.clientWidth; 
 h = menu.clientHeight; 
 left = (x - event.clientX >= w) ? event.clientX - wrap.offsetLeft : event.clientX - wrap.offsetLeft - w; 
 top = (event.clientY + h <= y) ? event.clientY - wrap.offsetTop : event.clientY - wrap.offsetTop - h; 
 menu.style.left = left + 'px'; 
 menu.style.top = top + 'px'; 
 }); 
 
EventUnit.addHandler(document, 'click', function() { 
 menu.style.display = menuStyle; 
 }); 
 }); 
 //]]> 
 </script> 
 </head> 
 
<body> 
 <div id="wrap"> 
 <p id="obj">单击右键看效果~</p> 
 <ul id="menu"> 
 <li><a href="#">撤销</a></li> 
 <li><a href="#">重做</a></li> 
 <li><a href="#">复制</a></li> 
 <li><a href="#">粘贴</a></li> 
 </ul> 
 </div> 
 </body> 
 </html> --------------------编程问答-------------------- 如果 <p id="obj">单击右键看效果~</p>  有个编号的值,我要点撤销怎么把值传到Action里面啊
补充:Java ,  Java相关
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,