区域右键方案

xdlvpei

浏览: 32187 次
性别:
来自: 北京

最近访客更多访客>>

jinjian1985go

woodding2008

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

IE prototype J#浏览器 XHTML

<!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>

分享到：

一套舍不得扔的Tab方案 | Jquery1.3.2 单选按钮取值

2010-03-02 13:33
浏览 701
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

区域右键方案

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

区域右键方案

评论

发表评论

相关推荐

仿firebug的控制台输出，兼容IE

Javascript作用域浅析

javascript函数

jquery.autocomplete 最简化

JavaScript高级教程一书开头

jquery部分常用表达式

jQuery方法大全

国家和地区的下拉列表

隐藏列表显示状态的js技巧

页面右键菜单Beta2(兼容fw)

表单提交前验证

用JS或jQuery访问页面内的iframe,兼容IE/FF

window.open()的所有参数列表

项目中的新窗口弹出

一套舍不得扔的Tab方案

Jquery1.3.2 单选按钮取值

最近访客更多访客>>