html中自定义右键菜单功能,HTML中自定义右键菜单功能
我们使用的应用系统很多都有右键菜单功能。但是在网页上面,点击右键一般显示的却是IE默认的右键菜单,那么我们如何实现自己的右键菜单呢?下面将讲解右键菜单功能的实现原理和实现代码。
实现原理
在HTML语言中,基本上每个对象都有一个oncontextmenu事件,这个事件就是鼠标的右键单击事件(onclick事件是鼠标的左键单击事件),那么我们就可以在鼠标右击的时候,让系统弹出一个窗口(这个是popup窗口,显示在IE的最前面,没有菜单),上面显示我们想要显示的菜单信息,当我们单击其中某一项的时候,就执行我们设定的动作,然后将弹出窗口关闭。
实现代码
下面我写了一个示例代码,模拟一个多层div,当我们右键点击多层div某一项的时候,就会弹出右键菜单,里面有“creat row”、“ modify row”、“delete row” 三个菜单项,单击某项会执行相应的操作。下面的代码内容:
首先,我们需要编辑一个右键菜单,并且将其隐藏,需要时再弹出。
creat row |
modify row |
delete row |
其次,将主页面的多层div罗列出来。
accepts xml box
accepts DataBase box
accepts RSS box
最后,也是关键部分,使用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
{
//如果设置该行不显示,则行数减一
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" );
}
小结:本文的重点是如何实现自定义的右键菜单,以及对右键菜单项的操作。通过本文的例子,相信大家已经学会oncontextmenu和 popMenu的使用方法。也希望大家学会灵活运用实例。
html中自定义右键菜单功能,HTML中自定义右键菜单功能相关推荐
- 中的 隐藏鼠标菜单_如何在鼠标右键菜单中添加自定义菜单?工效率提升一倍...
人都是"懒"的,在使用电脑时,对于常用的操作,步骤太多用久了难免会产生烦躁的情绪,虽然系统已经自带了很多快捷方式,但还是不够用,我们通常都会把常用的东西通过快捷方式来添加到桌面,但 ...
- [html] 怎样禁用页面中的右键、打印、另存为、复制等功能?
[html] 怎样禁用页面中的右键.打印.另存为.复制等功能? <body oncontextmenu=self.event.returnValue=false onselectstart=&q ...
- Kubernetes API Aggregation在 Master 的 API Server 中启用 API 聚合功能注册自定义 APIService 资源实现和部署自定义的 API Serv
如需转载请标注内容地址为: https://wiki.shileizcc.com/confluence/display/KUB/Kube Kubernetes API Extension Kubern ...
- 电脑装的是office2013,右键新建却是2007,或者右键新建菜单中没有excel2013问题解决办法。
电脑装的是office2013,右键新建却是2007,或者右键新建菜单中没有excel2013问题解决办法. 参考文章: (1)电脑装的是office2013,右键新建却是2007,或者右键新建菜单中 ...
- 计算机中的表格中怎么排序,如何设置Excel表格的横向排序功能
如何设置Excel表格的横向排序功能 腾讯视频/爱奇艺/优酷/外卖 充值4折起 今天,小编给大家介绍设置Excel表格横向排序功能的方法,希望对大家有所帮助. 具体如下: 1.首先,请大家在自己的电脑 ...
- 关于MUI框架中,“侧滑导航“之“div模式下拉菜单“的a标签(超链接)的失效问题?
关于MUI框架中,"侧滑导航"之"div模式下拉菜单"的a标签(超链接)的失效问题? 截图和讲解图片的顺序如下所示: 图1 图2 · 官方的截图 图3 · 官方 ...
- SQL Server 2014新功能 -- 内存中OLTP(In-Memory OLTP)
概述 内存中OLTP(项目"Hekaton")是一个全新的.完全集成到SQL Server的数据库引擎组件. 对OLTP工作负载访问中在内存中的数据进行了优化.内存中OLTP能够帮 ...
- vue鼠标右键自定义菜单_使用Vue自定义指令实现右键菜单
前言 浏览器里右键时会有一个默认的菜单,在我的开源项目中正好有自定义右键菜单的需求,在npm库找了下与之相关的包,发现都是以组件形式实现的,感觉那种做法太过繁琐. 于是,我就想着能不能像vue的内置指 ...
- ABP框架中一对多,多对多关系的处理以及功能界面的处理(2)
不管上面的树形列表,还是很后面的复选框组,都是先请求关联主表的数据,然后再请求对应角色或者商品类型下的关系数据,绑定到界面上. 如对于上面的树形列表,通过设置树列表的数据,以及选中的记录就可以实现对应 ...
最新文章
- define的多行定义
- iOS 隐藏导航栏整个视图上移闪屏问题
- 洛谷——P3205 [HNOI2010]合唱队
- 300 行代码带你搞懂 Java 多线程!
- 计算机组成原理与应用,计算机组成原理简答与应用
- python学习总结----内置函数及数据持久化
- 如何查看SQL的执行计划
- steam服务器维护6月28,多多自走棋维护公告 多多自走棋6月28日更新内容
- 多少开发人员 饿了么_做个美团(饿了么)网站需要多少钱?
- 分数计算机在线应用,在线连分数计算器
- uboot 源码官方下载地址
- c语言学生成绩系统综合实验,C语言学生管理系统_综合实验报告.docx
- 实验五 类和对象-3 zxt
- cyclone iv 器件手册_GaN器件的直接驱动配置
- 发顶会论文,怎么就那么难?
- mysql bytes sent_MySQL服务器状态变量(mysqld)
- GIS开发:推荐Mapbox gl解决方案
- YOLOv5、v7改进之三十一:CrissCrossAttention注意力机制
- CME CMS ERROR错误代码
- [转载] 蝴蝶上如何做种候选及发布