首页 > 代码库 > 右击菜单简单实现
右击菜单简单实现
前几天项目验收的时候,提出“右击菜单”的需求。那么右击菜单有什么优点呢?为什么要做成这样?我想用一句:“提高用户体验度”就能够解除大家的疑惑吧。这样用户就能够依据自己的喜好,是点击固定button还是右击,无论通过那个渠道都能够达到目的,这样才干得到用户的青睐。
那么接下来就让我先从一个小的demo入手,体验一把吧!
一、准备工作
想要做的效果:
二、HTML代码
<span style="font-size:18px;"><!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>右击菜单体验</title> //<linkrel="stylesheet" type="text/css"href="http://www.mamicode.com/rightKeyMenu.css" /> <scripttype="text/javascript"src="http://www.mamicode.com/rightKeyMenu.js"></script> <styletype="text/css"> *{font-size:12px;} </style> <scriptlanguage="javascript"> functionaddRightKeyMenuItem(id){ varrightMenu = new RightKeyMenu.Menu(); rightMenu.setMenu(id,‘menuDiv‘); rightMenu.addMenuItems({ menuItemId:‘menu1‘, menuItmeImgSrc:‘tests.png‘, menuItemText:‘加入(我能够点)‘ },{ setOnClick:"menuClick(‘您在"+id+" 上点击了加入‘)" }); rightMenu.addMenuItems({ menuItemId:‘menu2‘, menuItmeImgSrc:‘tests.png‘, menuItemText:‘改动(我也能够点)‘, menuSplit:true },{ setOnClick:"menuClick(‘您在"+id+" 上点击了改动‘)" }); rightMenu.addMenuItems({ menuItemId:‘menu3‘, menuItmeImgSrc:‘tests.png‘, menuItemText:‘删除(我还能够点)‘ },{ setOnClick:"menuClick(‘您在"+id+" 上点击了删除‘)" }); returnrightMenu.show(); } functionmenuClick(text){ alert(text); } </script> </head> <bodyonclick="RightKeyMenu.hidden();" style="border:1px solid#000;width:800px;height:500px;"> <divclass="menu" id="menuDiv"></div> <tablebordercolor="#CCCCCC" border="1" cellSpacing="0"cellPadding="0"style="width:200px;border-collapse:collapse;margin:0auto;margin-top:5px;"> <tr id="one" style="height:30px; cursor:default;" onm ouseover="javascript:this.style.backgroundColor =‘#E8F3FD‘" onm ouseout="javascript:this.style.backgroundColor =‘#fff‘" oncontextmenu="return addRightKeyMenuItem(‘用户信息一‘);"> <tdalign="center">用户信息一(在这点右键试试)</td> </tr> <tr id="two" style="height:30px; cursor:default;" onm ouseover="javascript:this.style.backgroundColor =‘#E8F3FD‘" onm ouseout="javascript:this.style.backgroundColor =‘#fff‘" oncontextmenu="return addRightKeyMenuItem(‘用户信息二‘);"> <tdalign="center">用户信息二(在这点右键试试)</td> </tr> </table> <br/><br/><br/><br/><br/> <divstyle="width:800px; text-align:center;">框内为Body区域---点击此区域右键菜单消失!成为网页的右击菜单!</div> </body> </html></span>
三、JS代码
<span style="font-size:18px;">var ie =(navigator.appVersion.indexOf("MSIE")!=-1);//IE var ff =(navigator.userAgent.indexOf("Firefox")!=-1);//Firefox var RightKeyMenu = { /** 初始化菜单对象**/ menuObj: null, /* * 创建右键菜单 */ Menu: function(){ /** 初始化菜单项**/ this.menuItemsHTML= ""; /** 当前菜单项**/ this.menuItemsIndex= 0; /** 初始化菜单**/ this.menuHTML= ""; /** 菜单ID **/ this.menuId= ""; this.setMenu= function(menuId,menuDiv){ this.menuId= menuId; RightKeyMenu.menuObj= document.getElementById(menuDiv); }; /** 往右键菜单中加入项 **/ this.addMenuItems= function(paramsObj,eventObj){ if(paramsObj!= null && paramsObj != ""){ varid = ""; varimg = ""; vartext = ""; varsetOnclick = ""; if(eventObj!= null && eventObj != "" && eventObj.setOnClick !=null && eventObj.setOnClick != ""){ setOnclick= eventObj.setOnClick; } if(paramsObj.menuItemId!= null && paramsObj.menuItemId != "") id= paramsObj.menuItemId; if(paramsObj.menuItmeImgSrc!= null && paramsObj.menuItmeImgSrc != "") img= ‘<td style="width:21px;" align="center"><imgsrc="http://www.mamicode.com/‘+paramsObj.menuItmeImgSrc+‘"/></td>‘; else img= ‘<td style="width:5px;"align="center"> </td>‘; if(paramsObj.menuItemText!= null && paramsObj.menuItemText != "") text= ‘<td> ‘+paramsObj.menuItemText+‘ </td>‘; else text= ‘<td> </td>‘; this.menuItemsHTML+= ‘<tr id="‘+id+‘"onmouseover="javascript:this.style.backgroundColor = \‘#C3E2F8\‘"onmouseout="javascript:this.style.backgroundColor = \‘#F0F0F0\‘"style="height:25px;cursor:pointer;" onclick="‘+setOnclick+‘;">‘+ img + text + ‘</tr>‘; if(paramsObj.menuSplit!= null && paramsObj.menuSplit == true){ this.menuItemsHTML+= ‘<tr style="height:1px;"><td colspan="2"valign="middle"><hr size="1" align="center"style="border-top: 1px dashed#C0C0C0;width:85%;"></td></tr>‘; } this.menuItemsIndex++; }; }; /** 显示右键菜单**/ this.show= function(){ RightKeyMenu.menuObj.innerHTML= ‘<table id="table_‘+this.menuId+‘"bordercolor="#CCCCCC" rules="groups" border="1"cellSpacing="0" cellPadding="0"style="border-collapse:collapse;min-width:80px;">‘+this.menuItemsHTML + ‘</table>‘; vardbcw = document.body.clientWidth; vardbch = document.body.clientHeight; vardbsl = document.body.scrollLeft; vardbst = document.body.scrollTop; varevent = this.getEvent(); varrightedge = dbcw - event.clientX; varbottomedge = dbch - event.clientY; RightKeyMenu.menuObj.style.display= ""; if(ie){ if(rightedge < RightKeyMenu.menuObj.offsetWidth) { RightKeyMenu.menuObj.style.left= (dbcw >= RightKeyMenu.menuObj.offsetWidth) ? (dbcw -RightKeyMenu.menuObj.offsetWidth) : 0; }else { RightKeyMenu.menuObj.style.left= dbsl + event.clientX; } if(bottomedge < RightKeyMenu.menuObj.offsetHeight) { RightKeyMenu.menuObj.style.top= (dbch >= RightKeyMenu.menuObj.offsetHeight) ? (dbch -RightKeyMenu.menuObj.offsetHeight) : 0; }else { RightKeyMenu.menuObj.style.top= dbst + event.clientY; } }else{ if(rightedge < RightKeyMenu.menuObj.offsetWidth) { RightKeyMenu.menuObj.style.left= dbcw - RightKeyMenu.menuObj.offsetWidth; }else { varleftXValue = http://www.mamicode.com/dbsl + event.clientX+6;"px"; } if(bottomedge < RightKeyMenu.menuObj.offsetHeight) { RightKeyMenu.menuObj.style.top= (dbch >= RightKeyMenu.menuObj.offsetHeight) ? (dbch -RightKeyMenu.menuObj.offsetHeight) : 0; }else { varleftYValue = http://www.mamicode.com/dbst + event.clientY;"px"; } } RightKeyMenu.menuObj.style.visibility= "visible"; event.returnValue= http://www.mamicode.com/false;"object" && arg0.preventDefault &&arg0.stopPropagation)) { returnarg0; } } func= func.caller; } returnnull; } }, /** 隐藏右键菜单**/ hidden: function(){ if(RightKeyMenu.menuObj!= null){ RightKeyMenu.menuObj.style.display= "none"; RightKeyMenu.menuObj= null; } } } </span>
四、总结
以上就能够实现一个简单的右击菜单,假设想把它运用的项目中。还须要和系统进行融合和封装。只是相信我们一定能够的,加油!
右击菜单简单实现
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。