您的位置:首页 > Web前端 > JavaScript

JS : 改变/模拟右键菜单

2011-08-30 14:14 253 查看
// JavaScript Document

////Date: 2011-08-06

////author: Tanyong

////QQ:491960352

////对象: RightMenu

////参数:dom 显示的对象,closedom按钮(可选)

////作用: 改变/模拟右键菜单

////平台:firefox,opera,ie

/// /Example::

////step 1: Creat htmldivElement

//// <div id="htmldivElement"></div>

////step 2: 设置 css sytle::

////#htmldivElement{width:100px; height:200px; border:1px solid #000000; background:#CCC;}

////waring::警告 position="absolute"; 定位必须是绝对

////step 3 在文档中添加 RightMenu.Reg("showElement","closeElement")

////如果不想用html创建可选:RightMenu.Creat(tag,Elementid,h,w) ////(里面的css属性自己添加修改)

var NoAgreeText = "此操作被浏览器拒绝!请在浏览器地址栏输入 about:config 并回车\n然后将 [signed.applets.codebase_principal_support] 设置为 true";

var ParamErrText = "参数错误/缺少"

var RightMenu={

////构造函数,注册一些事件

Reg:function (dom,closedom){

if(!dom){alert(ParamErrText); return false;}

try{

this._$=this.$(dom);

var css=this.css=this._$.style;

this.setAlpha(this._$,50);

//css.display="none";

css.position="absolute";

css.index="999";

css.left = getinfo.getMouseXY(evt)[0] +"px" //clientX 鼠标X柱

css.top = getinfo.getMouseXY(evt)[1] +"px"//clientY 鼠标Y柱

this.isIe ? css.opacity=0.1:css.opacity=0.65;

css.zIndex=999;

//文档右击屏蔽系统正常的菜单,显示自定义htmlElement

document.oncontextmenu= function (evt){

evt = window.event || evt; // 获取当前事件对象 都是FF 才要这么写的

css.display="block"; //块状显示

css.left = getinfo.getMouseXY(evt)[0] +"px" //clientX 鼠标X柱

css.top = getinfo.getMouseXY(evt)[1] +"px"//clientY 鼠标Y柱

return false //屏蔽系统

}

try{if(closedom){

this.$(closedom).onclick=function (){

try{document.body.removeChild(this.$(dom));

}catch(e){

css.display="none";

};

};

};

}catch(e){

return false ;

};

}catch(e){

alert("该对象使用失败\r\n"+e+"\r\n"+ NoAgreeText)

return false ;

}

},

////获取dom节点 element

$:function (Element){

var hmtlElement=(typeof Element=="string" ||typeof Element=="String" )? document.getElementById(Element):Element ;

return hmtlElement;//返回节点

},

// 浏览器判断是否为。为兼容性做扩展

isIE: (navigator.appName == "Microsoft Internet Explorer") || window.ActiveXObject?true:false, //ie?

isfirefox:(navigator.userAgent.toLowerCase().indexOf("firefox")!=-1),//判断是否为firefox

issafari:(navigator.userAgent.toLowerCase().indexOf("safari")!=-1),//判断是否为safari

isOpera : (navigator.userAgent.toLowerCase().indexOf("opera")!=-1),//判断是否为Opera

///下面为自由扩展,创建divElement

Creat:function (tag,Elementid,h,w){

try{

var div=document.createElement(tag);//创建divElement

var cssstyle=div.style; //初始化属性

div.id=Elementid; //id

// cssstyle.display="none";

cssstyle.height=h+"px"; //高

cssstyle.width=w+"px"; //宽

cssstyle.border="1px solid #000000"; //边框 一厘米 实心线 黑色

cssstyle.backgroundColor="#cccccc";//背景颜色

cssstyle.top=999+"px";

cssstyle.left=999+"px";

//cssstyle.opacity=0.25

cssstyle.zIndex=999;

cssstyle.position="absolute";

div.innerHTML="<button id=\"c\">close</button>"

document.getElementsByTagName("body").item(0).appendChild(div);

}catch(e){

alert("创建html标签:"+tag+"失败\r\n"+e)

return false ;

}

},

//透明某个对象

setAlpha:function(id,num){

var get=this.$(id);

if(this.isIE){ //IE

if(this.$(id)){

this.$(id).style.filter = "alpha(opacity="+num+")";

}else{

id.style.filter = "alpha(opacity="+num+")";

}

}else{

if(this.$(id)){

this.$(id).style.opacity = parseInt(num)/100;

}else{

id.style.opacity = parseInt(num)/100;

}

}

}

};

var dom=function (Element){

Element=Element || this;

return RightMenu.$(Element)

};
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: