【工具代码】JavaScript实现右键菜单的一种方式
2010-06-09 22:10
731 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<base href="http://imgqun.qq.com/cgi-bin/" mce_href="http://imgqun.qq.com/cgi-bin/" />
<mce:style><!--
html,body{
height:100%;padding:0;margin:0;
}
body{background:#fff url(img?uuid=209489090683b8676f1fbe02ec3a766a5f) repeat-x }
.popUpMenu{
margin:0;padding:0;list-style-type:none;
position:absolute;float:left;
border:1px solid #999;
border-left:8px solid #990000;
_width:150px;min-width:150px;
white-space:wrap;
padding:1px;
font-size:12px;
background:#ddd;
visibility:hidden;
opacity=0.85;
}
.popUpMenu li{
position:relative;
}
.popUpMenu li.splitLine{
background:#aaa;
height:1px;
overflow:hidden;
font-size:0;
line-height:1px;
border-bottom:1px solid #fff;
margin:1px 2px 2px 10px;
}
.popUpMenu li a,.popUpMenu li.disabled span{
color:#000;text-decoration:none;
display:block;zoom:1;
line-height:20px;
height:20px;
text-indent:24px;
width:150px;
}
.popUpMenu li.disabled span{
color:#999;
cursor:default;
}
.popUpMenu li a.toSub{
background:url(menu/hassub.gif) no-repeat 100% 50%;
}
.popUpMenu li a:hover,.popUpMenu li.open a{
background-color:#CC6600;
color:#fff; cursor:pointer;
line-height:18px;
height:18px;
width:148px;
border:1px solid #990000;
}
.popUpMenu li span{
display:block;
width:100%;
background-position:2% 50%;
background-repeat:no-repeat;
}
#google{
position:absolute;
width:100%;
bottom:0;
line-height:36px;
background:#666 url(img?uuid=201f82cf658e486dc93c87c042a4191ff6) no-repeat 2% 50%;
border-top:1px solid #aaa;
text-indent:5%;
font-size:12px;
color:#fff;
}
.ico{
background:url(img?uuid=20193d0fd167a6d8fa4befa23a3f1c333e) no-repeat;
width:86px;height:86px;
}
.myIco{
position:absolute;
left:20px;
top:50px;
font-size:12px;
color:#aaa;
text-align:center;
}
--></mce:style><style mce_bogus="1">html,body{
height:100%;padding:0;margin:0;
}
body{background:#fff url(img?uuid=209489090683b8676f1fbe02ec3a766a5f) repeat-x }
.popUpMenu{
margin:0;padding:0;list-style-type:none;
position:absolute;float:left;
border:1px solid #999;
border-left:8px solid #990000;
_width:150px;min-width:150px;
white-space:wrap;
padding:1px;
font-size:12px;
background:#ddd;
visibility:hidden;
opacity=0.85;
}
.popUpMenu li{
position:relative;
}
.popUpMenu li.splitLine{
background:#aaa;
height:1px;
overflow:hidden;
font-size:0;
line-height:1px;
border-bottom:1px solid #fff;
margin:1px 2px 2px 10px;
}
.popUpMenu li a,.popUpMenu li.disabled span{
color:#000;text-decoration:none;
display:block;zoom:1;
line-height:20px;
height:20px;
text-indent:24px;
width:150px;
}
.popUpMenu li.disabled span{
color:#999;
cursor:default;
}
.popUpMenu li a.toSub{
background:url(menu/hassub.gif) no-repeat 100% 50%;
}
.popUpMenu li a:hover,.popUpMenu li.open a{
background-color:#CC6600;
color:#fff; cursor:pointer;
line-height:18px;
height:18px;
width:148px;
border:1px solid #990000;
}
.popUpMenu li span{
display:block;
width:100%;
background-position:2% 50%;
background-repeat:no-repeat;
}
#google{
position:absolute;
width:100%;
bottom:0;
line-height:36px;
background:#666 url(img?uuid=201f82cf658e486dc93c87c042a4191ff6) no-repeat 2% 50%;
border-top:1px solid #aaa;
text-indent:5%;
font-size:12px;
color:#fff;
}
.ico{
background:url(img?uuid=20193d0fd167a6d8fa4befa23a3f1c333e) no-repeat;
width:86px;height:86px;
}
.myIco{
position:absolute;
left:20px;
top:50px;
font-size:12px;
color:#aaa;
text-align:center;
}</style>
</head>
<body>
<div class="myIco">
<div class="ico" id="ico_51"></div><br/><b>关于果果</b>
</div>
<div id="google" title='单击右键弹出快捷菜单'>
果果的任务栏
</div>
</body>
<mce:script type="text/javascript"><!--
var menuAdmin={/* 菜单管理器 */
list:Array(),
add:function(owner,menu){
owner=typeof owner=='string'?document.getElementById(owner):owner;
return this.list.push({'owner':owner,'menu':menu}),this;
},
init:function (){
var $=this,d=document;
if(window.ActiveXObject){d.execCommand("BackgroundImageCache", false, true);};
d.oncontextmenu=function(x){
for (var i=0,e=x||window.event,src=e.srcElement||e.target;i<$.list.length;i++){
var J=$.list[i];
J.menu.hide();/* hide other menu */
if(src==J.owner){J.menu.popUp(e.clientX,e.clientY);};
}
return false;
};
d.onclick=function (){for (var i=0;i<$.list.length;i++){$.list[i].menu.hide();}};/* hide other menu */
return $;
}
};
var popUpMenu=function(data,parent,root){/* 弹出菜单类 */
if(!root)root=this;/* save top menu's hander */
var ul=this.MUI('UL',null,'popUpMenu'),$=this,oldEvent=function(){};
$.UI=ul;
for (var i=0;i<data.length;i++ ) {/* insert all items */
var v=data[i],li=this.MUI('LI',ul,v.disabled?'disabled':false);
li.onmouseover=function (){/* hide all sibling's subMenu */
var lis=this.parentNode.getElementsByTagName('LI');
for (var i=0;i<lis.length;i++ ){
var J=lis[i];
if(J!=this){/* clear hasSub item bg */
J.className=='open'&&( J.className='');
J.subMenu&&(J.subMenu.hide());
}
};
};
if(v.radio!=undefined){/* if item like radio */
li.setAttribute('radio',v.radio);
if(v.selected==true&&!this.hasOnlyRadio){/* only first radio selected */
v.ico=this.radioIco;
this.hasOnlyRadio=true;
}
}
if(v.selected!=undefined&&v.radio==undefined){/* if item like checkbox */
li.setAttribute('selected',v.selected);
if(v.selected)v.ico=$.selectIco;
};
if(v.line){li.className='splitLine';}
else{
if(v.disabled){
this.MUI('SPAN',li,(v.sub?'toSub':false),v.text,v.ico);
}else{
this.MUI('SPAN',this.MUI('A',li,(v.sub?'toSub':false)),false,v.text,v.ico);
}
};
if(!v.sub){
if(typeof v.cmd!='function'){
v.cmd=this.cmd;
};
if(!v.disabled){
if(v.radio){/* is radio group */
li.onclick=(function (v){return function(){
root.hide();
var allLi=this.parentNode.getElementsByTagName("LI"),rdo=this.getAttribute('radio');
for (var i=0;i<allLi.length;i++ ){/* each group */
var J=allLi[i];
if(rdo!=J.getAttribute('radio'))continue;
var J2=J.getElementsByTagName("SPAN");
if(J2!=null){
J2[0].style.backgroundImage=(J==this)?
'url('+$.radioIco+')':'';
};
}
v.cmd(rdo,this);/* input group name and li */
}
})(v);
}else{/* is checkbox or normal */
li.onclick=(function (v){return function(){
root.hide();
var J=null;/* normal */
if(this.getAttribute('selected')!=undefined){/* if item can select */
J=this.getAttribute('selected')==true;
this.setAttribute('selected',!J);
this.getElementsByTagName("SPAN")[0].style.backgroundImage=!J?
'url('+$.selectIco+')':'';
}
v.cmd(J,this);/* input selected and li */
}
})(v);
}
}
}else{
li.onclick=function (e){/* cancel bubble */
e=e||window.event;
if(e.stopPropagation){e.stopPropagation();}
else{e.cancelBubble=true;};
};
new popUpMenu(v.sub,li,root);/* insert sub menu */
};
};
if(parent){/* set parent event */
if(typeof parent.onmouseover=='function'){oldEvent=parent.onmouseover;};
parent.onmouseover=function (e){
oldEvent.call(this);
this.className='open';
var pos=$.absPos(this),x=(pos.x+this.offsetWidth-2),y=pos.y+5;
$.show(x,y,this);
};
parent.onmouseout=function(){this.hideTimer=setTimeout(function(){$.hide();},20);};
/* sub over event */
parent.getElementsByTagName("SPAN")[0].onmouseover=
this.UI.onmouseover=function(){clearTimeout(parent.hideTimer); };
parent.subMenu=this;/* bind sub */
}
};
popUpMenu.prototype={/* 弹出菜单类扩展 */
absPos:function(J){
var x=y=0;
do {x+=J.offsetLeft;y+=J.offsetTop;}
while(J=J.offsetParent);
return { 'x':x,'y':y};
}
,popUp:function (x,y){this.show(x,y);}
,MUI:function(type,parent,css,text,ico){
var d=document,ui=(parent||d.body).appendChild(d.createElement(type));
if(css)ui.className=css;
if(text)ui.innerHTML=text;
if(type.toUpperCase()=='A')ui.setAttribute('href','javascript:void(0)');
if(ico)ui.style.backgroundImage='url('+ico+')';
return ui;
}
,show:function (x,y,parent){
this.hide();/* on reClick neet hide all sub */
var w=this.UI.offsetWidth ,h=this.UI.offsetHeight,db=document.body
,dw=db.clientWidth,dh=db.clientHeight;
if(h+y>dh){/* y overflow */
y-=h;if(parent){y+=parent.offsetHeight;};
}else{if(parent){y-=10;}};
if(w+x>dw){/* x overflow */
x-=w;if(parent){x-=parent.offsetWidth-10;};
}else{if(parent){x+=5;};}
var J=this.UI.style;
J.visibility!='visible'&&(J.visibility='visible');J.top=y+'px';J.left=x+'px';
}
,hide:function (){
var J=this.UI.style,items=this.UI.getElementsByTagName('LI');
J.visibility!='hidden'&&(J.visibility='hidden');
for (var i=0;i<items.length;i++ ){/* clear hasSub item bg */
var J=items[i];
J.className=='open'&&(J.className='');
J.subMenu&&J.subMenu.hide();
};
}
,cmd:function(){/* default eventHander */
alert('轻轻的你点了"'+this.text+'"/n证明你爱无忧，爱果果，爱JavaScript!')
}
,radioIco:'fix.gif'
,selectIco:'selected.gif'
};
/*
data
*/
var taskBar=[
{text:'工具栏',sub:[
{text:'链接',selected:true,cmd:function(){alert('这个不能看!')}},
{text:'语言栏',selected:true},
{text:'桌面',selected:true},
{text:'快速启动',selected:false},
{line:true},
{text:'新建工具栏...',cmd:function(){alert('过几天吧!')}}
]},
{text:'层叠窗口',ico:'sheet.gif',cmd:function(){alert('哪里有窗口啊老大!')}},
{line:true},
{text:'横向平铺窗口',disabled:true},
{text:'纵向平铺窗口',disabled:true},
{text:'显示桌面',ico:'desk.gif',cmd:function(){alert('本来就在桌面上嘛!')}},
{line:true},
{text:'任务管理器',cmd:function(){alert('我也不知道在哪里!')}},
{line:true},
{text:'锁定任务栏',ico:'fix.gif',cmd:function(){alert('锁定不了!')}},
{text:'属性',cmd:function(){alert('保密!')}}
];
var deskTop=[
{text:'排列图标',ico:'align.gif',sub:[
{text:'名称',radio:'alignType',cmd:function(){alert('一个图标怎么排?')}},
{text:'大小',radio:'alignType',selected:true,cmd:function(x){alert('您选中'+x+'这个组！')}},
{text:'类型',radio:'alignType'},
{text:'修改时间',radio:'alignType'},
{line:true},
{text:'按组排列',radio:'alignType',cmd:function(x,ui){alert(ui.innerHTML)}},
{text:'自动排列',radio:'alignType'},
{text:'对齐到网格',radio:'alignType'},
{line:true},
{text:'显示桌面图标',selected:true},
{text:'在桌面上锁定Web项目',disabled:true},
{text:'运行桌面清理任务',ico:'clear.gif'}
]},
{text:'刷新',cmd:function(){alert('干嘛不按F5!')}},
{line:true},
{text:'粘贴',ico:'paste.gif',cmd:function(){alert('粘不了!')}},
{text:'粘贴快捷方式',disabled:true},
{text:'重命名',disabled:true},
{line:true},
{text:'新建',ico:'add.gif',sub:[
{text:'文件夹',ico:'folder.gif',cmd:function(){alert('过几天吧!')}},
{text:'快捷方式',disabled:true},
{line:true},
{text:'公文包'},
{text:'Microsoft Word 文档',ico:'word.gif'},
{text:'文本文档'},
{text:'WinRAR 压缩文件'},
{text:'ACDSee PSD 图像'} ,
{text:'更多格式',ico:'more.gif',sub:[
{text:'果果自创文档',cmd:function(){alert('有些成人内容哦!')}},
{text:'无忧加密'},
{text:'英语四六级',sub:[
{text:'破解',sub:[{text:'敏感内容'},{text:'待续...'}]},
{text:'电影'},
{text:'小说'},
{text:'音乐'}
]}
]}
]},
{text:'属性',cmd:function(){alert('怎么这么多要求!')}}
];
var ico=[
{text:'打开WebOS',ico:'open.gif',cmd:function(){setTimeout("window.location='/uos/'",10);}},
{line:true},
{text:'运行方式...',disabled:true},
{text:'发送到',ico:'send.gif',sub:[
{text:'桌面快捷方式',cmd:function(){alert('不可能的事!')}},
{text:'邮件发送者',ico:'email.gif'},
{text:'我的文档'},
{text:'3.5寸软盘',ico:'disk.gif'}
]},
{line:true},
{text:'剪切',cmd:function(){alert('想都别想!')}},
{text:'复制',ico:'copy.gif',cmd:function(){alert('这个操作有点难')}},
{line:true},
{text:'创建快捷方式'},
{text:'删除',ico:'delx.gif',disabled:true},
{text:'重命名',cmd:function(){alert('不让你改!')}},
{line:true},
{text:'属性',cmd:function(){alert('相处久了自然知道!')}}
];
/*
apply
*/
var m1=new popUpMenu(deskTop);
var m2=new popUpMenu(taskBar);
var m3=new popUpMenu(ico);
menuAdmin.init()
.add(document.documentElement,m1)
.add(document.body,m1)
.add('google',m2)
.add('ico_51',m3);
//alert('分别在图标、桌面、任务栏上单击右键可查看效果！');
// --></mce:script>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 实现二级菜单的一种方式--没有js 运行不了，主要看代码红色部分，只提供思路
- 网页禁用右键实现代码（JavaScript代码）
- chrome扩展学习 右键菜单实现代码
- 基于JavaScript实现智能右键菜单
- jquery 实现右键菜单， 超简单比网上其他的代码短多了
- 实现文件右键“打开方式”菜单功能（查看系统这种功能对比实现）
- 实现文件右键“打开方式”菜单功能（查看系统这种功能对比实现）（读注册表的方法）
- javascript伸缩型菜单实现代码
- JavaScript实现三级联动菜单实例代码
- 利用JS重写Cognos右键菜单的实现代码
- 右键菜单实现javascript
- javascript实现的全国省市县无刷新多级关联菜单效果代码
- JavaScript实现右键菜单（二）
- 【图说】介绍一种简单方式，实现缺陷与SVN的代码相关联，并能自动展现Code修改前后对比
- javascript实现继承的一种方式
- 3种不同的ContextMenu右键菜单实现代码
- SkylineGlobe 6.6 三维地图上实现自定义右键菜单示例代码
- JavaScript 对任意元素,自定义右键菜单的实现方法
- Javascript代码压缩、加密算法的破解分析及工具实现
- Javascript代码压缩、加密算法的破解分析及工具实现