JS : 改变/模拟右键菜单

 // 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.οncοntextmenu= 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).οnclick=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)
 };    
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
根目录 菜单菜单二 go 修改 删除 function showMenu(id){ menuForm.id.value = id; if("" == id){ } else{ popMenu(itemMenu,100,"111"); } event.returnValue=false; event.cancelBubble=true; return false; } /** *显示弹出菜单 *menuDiv:右键菜单的内容 *width:行显示的宽度 *rowControlString:行控制字符串,0表示不显示,1表示显示,如“101”,则表示第1、3行显示,第2行不显示 */ function popMenu(menuDiv,width,rowControlString){ //创建弹出菜单 var pop=window.createPopup(); //设置弹出菜单的内容 pop.document.body.innerHTML=menuDiv.innerHTML; var rowObjs=pop.document.body.all[0].rows; //获得弹出菜单的行数 var rowCount=rowObjs.length; //循环设置每行的属性 for(var i=0;i<rowObjs.length;i++) { //如果设置该行不显示,则行数减一 var hide=rowControlString.charAt(i)!='1'; if(hide){ rowCount--; } //设置是否显示该行 rowObjs[i].style.display=(hide)?"none":""; //设置鼠标滑入该行时的效果 rowObjs[i].cells[0].onmouseover=function(){ this.style.background="#818181"; this.style.color="white"; } //设置鼠标滑出该行时的效果 rowObjs[i].cells[0].onmouseout=function(){ this.style.background="#cccccc"; this.style.color="black"; } } //屏蔽菜单菜单 pop.document.oncontextmenu=function(){ return false; } //选择右键菜单的一项后,菜单隐藏 pop.document.onclick=function(){ pop.hide(); } //显示菜单 pop.show(event.clientX-1,event.clientY,width,rowCount*25,document.body); return true; } function create(){ alert("create" + menuForm.id.value + "!"); } function update(){ alert("update" + menuForm.id.value + "!"); } function del(){ alert("delete" + menuForm.id.value + "!"); } function clickMenu(){ alert("you click a menu!"); }

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值