右击菜单简单实现

来源：互联网发布：3g软件培训机构编辑：程序博客网时间：2024/05/17 09:11

前几天项目验收的时候，提出“右击菜单”的需求。那么右击菜单有什么好处呢？为什么要做成这样？我想用一句：“提高用户体验度”就可以解除大家的疑惑吧！这样用户就可以根据自己的喜好，是点击固定按钮还是右击，不管通过那个渠道都可以达到目的，这样才能得到用户的青睐。

那么接下来就让我先从一个小的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="rightKeyMenu.css" /><scripttype="text/javascript"src="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;" onmouseover="javascript:this.style.backgroundColor ='#E8F3FD'" onmouseout="javascript:this.style.backgroundColor ='#fff'" oncontextmenu="return addRightKeyMenuItem('用户信息一');">           <tdalign="center">用户信息一(在这点右键试试)</td>    </tr><tr id="two" style="height:30px; cursor:default;" onmouseover="javascript:this.style.backgroundColor ='#E8F3FD'" onmouseout="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);//IEvar ff =(navigator.userAgent.indexOf("Firefox")!=-1);//Firefoxvar 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="'+paramsObj.menuItmeImgSrc+'"/></td>';elseimg= '<td style="width:5px;"align="center"> </td>'; if(paramsObj.menuItemText!= null && paramsObj.menuItemText != "")text= '<td> '+paramsObj.menuItemText+' </td>';elsetext= '<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 = dbsl + event.clientX+6;RightKeyMenu.menuObj.style.left= leftXValue + "px";} if(bottomedge < RightKeyMenu.menuObj.offsetHeight) {RightKeyMenu.menuObj.style.top= (dbch >= RightKeyMenu.menuObj.offsetHeight) ? (dbch -RightKeyMenu.menuObj.offsetHeight) : 0;}else {varleftYValue = dbst + event.clientY;RightKeyMenu.menuObj.style.top= leftYValue + "px";}}RightKeyMenu.menuObj.style.visibility= "visible";event.returnValue= false;returnfalse;};/** 获取鼠标事件**/this.getEvent= function(){if(document.all) {returnwindow.event;}func= this.getEvent.caller;while(func != null) {vararg0 = func.arguments[0];if(arg0) {if((arg0.constructor == Event || arg0.constructor == MouseEvent) || (typeof(arg0) == "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>

四、总结

　　以上就可以实现一个简单的右击菜单，如果想把它运用的项目中，还需要和系统进行融合和封装，不过相信我们一定可以的，加油！

0 0