区域右键方案

最新推荐文章于 2024-06-28 22:13:07 发布

xdlvpei

最新推荐文章于 2024-06-28 22:13:07 发布

阅读量64

点赞数

分类专栏： JavaScript 文章标签： IE prototype J# 浏览器 XHTML

JavaScript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>sdf</title> 
<style type="text/css"> 
html,body{margin:0px;padding:0px;width:100%;height:100%;font-size:12px;overflow:show;} 
#cmenu{border:1px solid #5EB4D8;background-color:#F6F9FD;padding:2px;} 
ul,li{list-style:none;margin:0px;padding:0px;} 
.item{list-style:none;margin:0px;padding:0px;height:23px;line-height:23px;display:block;padding:0px;padding-left:10px;} 
.itemOver{background-color:#68B5EA;color:#fff;cursor:default;} 
.separator{width:100%;height:1px;line-height:1px;overflow:hidden;font-size:1px;background-color:#ACA899;margin:1px 0px 1px 0px;padding:0px;} 

.contextDiv{position:absolute;border:1px solid #cccccc;width:150px;height:100px;background-color:#EFECDD;} 
</style> 
</head> 
<body> 
<div id="div1" class="contextDiv" style="left:300px;top:80px;">右键 Div1</div> 
<div id="div2" class="contextDiv" style="left:300px;bottom:0px;">右键 Div2</div> 
<div id="div3" class="contextDiv" style="float:right;right:0px;top:100px;">右键 Div3</div> 
<div id="div4" class="contextDiv" style="float:right;right:0px;bottom:0px;">右键 Div4</div> 
<select style="position:absolute;top:200px;left:300px;"> 
<option>1111111111111111111111111111111</option> 
</select> 
<div id="cmenu" style="position:absolute;display:none;top:0px;left:0px;width:100px;z-index:10000;"> 
<ul> 
<li id="open">打开</li> 
<li id="edit">编辑</li> 
<li id="del" class="disabled">删除</li> 
<li class="separator"></li> 
<li id="rename">重命名</li> 
<li class="separator"></li> 
<li id="prop">属性</li> 
</ul> 
</div> 
</body> 
</html>


<script type="text/javascript"> 
<!-- 
// 获取对象 
function $o(id){return document.getElementById(id); } 
// 获取目标元素 
function getElement(evt){ evt = evt ||window.event; return (evt.srcElement || evt.target);} 
// 鼠标X坐标 
function positionX(evt){evt = evt || window.event; return (evt.x || evt.clientX || evt.pageX);} 
// 鼠标Y坐标 
function positionY(evt){evt = evt || window.event; return (evt.y || evt.clientY || evt.pageY);} 
// 清除事件冒泡和传递影响 
function clearEventBubble(evt){ 
evt = evt || evt.event; 
if(evt.stopPropagation) evt.stopPropagation(); else evt.cancelBubble = true; 
if(evt.preventDefault) evt.preventDefault(); else evt.returnValue = false; 
} 
// 事件绑定 
function addEvent(actionEvents,eventObj){ 
eventObj = eventObj || document; 
if(window.attachEvent){ 
for(var actionType in actionEvents){ 
eventObj.attachEvent("on"+actionType,actionEvents[actionType]); 
} 
} 
if(window.addEventListener){ 
for(var actionType in actionEvents){ 
eventObj.addEventListener(actionType,actionEvents[actionType],false); 
} 
} 
} 

document.oncontextmenu = function(){return false; } 

// 右键菜单 
function contextMenu(initProps,bindingEvents){ 
this._contextMenu = null; // 右键菜单体 
this._contextMenuId = initProps["contextMenuId"]; // 待加载右键菜单的对象 
this._targetElement = initProps["targetElement"]; // 右键菜单目标 
this._funcEvents = bindingEvents.bindings; // 绑定的事件配置信息 
this._menuItems = null; // 菜单项 
// 浏览器类型判断 
this._isIE = function(){return navigator.userAgent.toLowerCase().indexOf("msie")!=-1 && document.all}; 
} 

// 初始化右键菜单功能 
contextMenu.prototype.buildContextMenu = function(){ 

// 获取菜单对象 
this._contextMenu = $o(this._contextMenuId); 
this._contextMenu.style.top ="-1000px"; 
this._contextMenu.style.left="-1000px"; 
this._contextMenu.style.display = "none"; 

// 初始化样式菜单项 
this._menuItems = this._contextMenu.getElementsByTagName("ul")[0].getElementsByTagName("li"); 
for(var i in this._menuItems){ 
if(this._menuItems[i].className != "separator"){ 
this._menuItems[i].className = "item"; 
this._menuItems[i].onmouseover = function(){this.className ="item itemOver";}; 
this._menuItems[i].onmouseout = function(){this.className = "item";} 
} 
} 

var _self = this; 

addEvent({ 
"contextmenu":function(){ 
var evt = window.event||arguments[0]; 
clearEventBubble(evt); 
_self.showContextMenu(evt); 
evt = null; 
}, 
"click":function(){ 
_self.hideContextMenu(); 
} 
},document); 

} 

contextMenu.prototype.addFunc = function(funcId,funcEle){ 
this._funcEvents[funcId](funcEle); 
} 

// 显示右键菜单 
contextMenu.prototype.showContextMenu = function(evt){ 
try{ 
var _cmenuObj = this._contextMenu; 
var _focusEle = getElement(evt); 
var _items = this._menuItems; 
var _self = this; 
if(_focusEle.className == this._targetElement){ 
// 绑定菜单项点击事件 
for(var j in _items){ 
if(_items[j].className != "separator"){ 
_items[j].onclick = function(){_self.addFunc(this.id,_focusEle); _self.hideContextMenu(); }; 
} 
} 

_cmenuObj.style.display = "block"; 

var _px = positionX(evt); 
var _py = positionY(evt); 
var _bodyWidth = parseInt(document.body.offsetWidth ||document.body.clientWidth); 
var _bodyHeight = parseInt(document.body.offsetHeight || document.body.clientHeight); 
var _mWidth = parseInt( _cmenuObj.offsetWidth || _cmenuObj.style.width); 
var _mHeight = parseInt(_cmenuObj.offsetHeight); 

_cmenuObj.style.left = ((_px + _mWidth) > _bodyWidth?(_px - _mWidth):_px) +"px"; 
_cmenuObj.style.top = ((_py + _mHeight) > _bodyHeight?(_py - _mHeight):_py) +"px"; 

// ie 下创建背景遮盖层 
if(this._isIE){ 
_self.createIframeBg({ 
"left" : _cmenuObj.style.left, 
"top" : _cmenuObj.style.top, 
"width" : _mWidth +"px", 
"height" : _mHeight+"px", 
"z-index": (parseInt(_cmenuObj.style.zIndex)-1) 
}); 
} 

_px = null,_py = null,_bodyWidth = null,_bodyHeight = null,_mWidth = null,_mHeight = null; 
}else{ 
this.hideContextMenu(); 
} 

}catch(e){ 
}finally{ 
_items = null; 
_srcEle = null; 
_cmenuObj = null; 
} 
} 
// 隐藏右键菜单 
contextMenu.prototype.hideContextMenu = function(){ 
// 移除在 ie 下创建 iframe背景层 
if(this._isIE && $o("maskIframe")){ 
document.body.removeChild($o("maskIframe")); 
} 
// 隐藏菜单 
if(this._contextMenu && this._contextMenu.style.display != "none"){ 
this._contextMenu.style.display = "none"; 
} 
} 
// ie 下为右键菜单添加 iframe背景层，用来遮住 select 
contextMenu.prototype.createIframeBg = function(styleProp){ 
var maskStyle = "position:absolute;left:"+styleProp["left"]+";top:"+styleProp["top"]+";width:"+styleProp["width"]+";height:"+styleProp["height"]+";z-index:"+styleProp["z-index"]; 

if($o("maskIframe")){ 
$o("maskIframe").style.cssText = maskStyle; 
}else{ 
var _maskIframeBg = document.createElement("<iframe id=\"maskIframe\" src=\"\" frameborder='0' border='0' scrolling=\"no\"></iframe>"); 
document.body.appendChild(_maskIframeBg); 
_maskIframeBg.style.cssText = maskStyle; 
_maskIframeBg = null; 
} 
maskStyle = null; 
} 

//--> 
</script> 

<script type="text/javascript"> 
var cmenu = new contextMenu( 
{ 
contextMenuId : "cmenu", 
targetElement : "contextDiv" 
}, 
{ 
bindings:{ 
'open' : function(o){alert("打开 "+o.id);}, 
'edit' : function(o){alert("编辑 "+o.id);}, 
'del' : function(o){alert("删除 "+o.id);}, 
'rename': function(o){alert("重命名 "+o.id);}, 
'prop' : function(){alert("查看属性");} 
} 
} 
); 
cmenu.buildContextMenu(); 
</script>

xdlvpei

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
区域右键方案

[code="html"] sdf html,body{margin:0px;padding:0px;width:100%;height:100%;font-size:12px;overflow:show;} #cmenu{border:1px solid #5EB4D8;background-color:#F6F9FD;padding:2px;} ul,l...
复制链接

扫一扫

专栏目录