区域右键菜单
<!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:#5EB4D8;margin:1px 0px 1px 0px;padding:0px;}
.contextDiv{position:absolute;border:1px solid #cccccc;width:150px;height:100px;background-color:#EFECDD;}
</style>
<script type="text/javascript">
<!--
/**
* author: yswang
* version: 1.2
* date: 2008-08-15
* mail: [email]wangys0927@163.com[/email]
*/
// 获取对象
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 || window.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";
// 阻止菜单的点击事件上传到document.onclick事件上
this._contextMenu.onclick = function(evt){
clearEventBubble(evt);
}
// 初始化样式菜单项
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];
_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].id && _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>
</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>新建 </li>
<li id="rename">重命名 </li>
<li class="separator"> </li>
<li id="prop">属性 </li>
</ul>
</div>
</body>
<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>
</html>
//鼠标单击事件window.document.onmousedown=function(event){ var e,Eint; try{e=event.button;e=event;Eint=0;}catch(e){e=window.event;Eint=1;} //0代表鼠标左键 //MLGB的 IE鼠标与FF鼠标位不一样的 干 if(e.button==Eint) { //菜单可能被点出 所以要释放 MouseMenuCheck=0; //定位 起始X,Y坐标 var MouseLeft=$("#RightMouse").css("left").replace("px",""),MouseTop=$("#RightMouse").css("top").replace("px",""); //末尾 X Y坐标 var MouseLeftEnd=MouseLeft*1+($("#RightMouse").css("width").replace("px","")*1),MouseTopEnd=MouseTop*1+($("#RightMouse").css("height").replace("px","")*1); var _X=Mouse._X(e),_Y=Mouse._Y(e); //这里主要是因为鼠标左键按下是全局的!!!所以要防止 鼠标在菜单中按下 if(!(_X>MouseLeft&&_X<MouseLeftEnd&&_Y>MouseTop&&_Y<MouseTopEnd)&&$('#RightMouse').css('display')!="none") { Mouse.MenuClose(); } }}//页面载入区$(document).ready( function(){ //全部完成后 这里将写预载入代码 //判断是否是IE浏览器 if (Ie) { //TMD IE7跟IE6显示又TMD不一样了 IE7竟然可以让PNG透明了 //这里是让IE7的布局不变 if(parseInt($.browser.version)==7) { $("#VistaButton").addClass("VistaButton7"); } else{$("#VistaButton").addClass("VistaButton6");} //定义IE的鼠标右点事件 document.oncontextmenu=function(){event.returnValue=Mouse.OnRightClick(event);}; } else { } //启动系统时钟 //第一次启动 $("#TaskbarEnd").html(System.DateTime("h:mm xx")); $("#TaskbarEnd").attr("title",System.DateTime("yyyy年M月d日")); //循环 window.setInterval('$("#TaskbarEnd").html(System.DateTime("h:mm xx"))',1000); //设置任务栏宽度 Taskbar=screen.width-170; $("#TaskbarIndex").width(Taskbar); System.BackGround.PageLoad(); });