HTML中自定义右键菜单功能
我们使用的应用系统很多都有右键菜单功能。但是在网页上面,点击右键一般显示的却是IE默认的右键菜单,那么我们如何实现自己的右键菜单呢?下面将讲解右键菜单功能的实现原理和实现代码。
实现原理
在HTML语言中,基本上每个对象都有一个oncontextmenu事件,这个事件就是鼠标的右键单击事件(onclick事件是鼠标的左键单击事件),那么我们就可以在鼠标右击的时候,让系统弹出一个窗口(这个是popup窗口,显示在IE的最前面,没有菜单),上面显示我们想要显示的菜单信息,当我们单击其中某一项的时候,就执行我们设定的动作,然后将弹出窗口关闭。
实现代码
下面我写了一个示例代码,模拟一个多层div,当我们右键点击多层div某一项的时候,就会弹出右键菜单,里面有“creat row”、“ modify row”、“delete row” 三个菜单项,单击某项会执行相应的操作。下面的代码内容:
首先,我们需要编辑一个右键菜单,并且将其隐藏,需要时再弹出。
<div id="itemMenu" style="display:none"> <table border="1" width="100%" height="100%" bgcolor="#cccccc" style="border:thin" cellspacing="0"> <tr> <td style="cursor:default;border:outset 1;" align="center" οnclick="parent.create()"> creat row </td> </tr> <tr> <td style="cursor:default;border:outset 1;" align="center" οnclick="parent.update();"> modify row </td> </tr> <tr> <td style="cursor:default;border:outset 1;" align="center" οnclick="parent.del();"> delete row </td> </tr> </table> </div> 其次,将主页面的多层div罗列出来。 <div dojoType="ContentPane" label="My Widgets" id="main" oncontextmenu = "javascript:showMenu();"> <div id="xml" oncontextmenu = "javascript:showMenu();"> <div id="grp1" class="module"> accepts xml box </div> </div> <div id="database" oncontextmenu = "javascript:showMenu();"> <div id="grp3"class="module"> accepts DataBase box </div> </div> <div id="rss" oncontextmenu = "javascript:showMenu();"> <div id="grp2" class="module"> accepts RSS box </div> </div> </div> 最后,也是关键部分,使用JavaScript编写函数部分。 <script language="JavaScript"> function showMenu() { 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].οnmοuseοver=function(){ this.style.background="#818181"; this.style.color="white"; } //设置鼠标滑出该行时的效果 rowObjs[i].cells[0].οnmοuseοut=function(){ this.style.background="#cccccc"; this.style.color="black"; } } //屏蔽菜单的菜单 pop.document.οncοntextmenu=function(){ return false; } //选择右键菜单的一项后,菜单隐藏 pop.document.οnclick=function(){ pop.hide(); } //显示菜单 pop.show(event.clientX-1,event.clientY,width,rowCount*25,document.body); return true; } function create(){ alert("create" ); } function update(){ alert("update" ); } function del(){ alert("delete" ); } </script>
小结:本文的重点是如何实现自定义的右键菜单,以及对右键菜单项的操作。通过本文的例子,相信大家已经学会oncontextmenu 和 popMenu的使用方法。也希望大家学会灵活运用实例。
转载请注明出处:http://www.cnblogs.com/penny/archive/2008/09/11/1288928.html
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」