- 浏览: 270559 次
- 性别:
- 来自: 成都
文章分类
最新评论
-
yh008:
不错的工具类。 版面需要调整下,有些内容看不到了,只能复制粘贴 ...
Spring 优秀工具类盘点,第 1 部分: 文件资源操作二 -
手心的水滴:
function Foo() { (function( ...
js 两个小括号 ()() 的用法 -
showthesunli:
博主说了这么多,我来说说我的想法,不晓得对不对总结一下,如下代 ...
js 两个小括号 ()() 的用法 -
aqbzwxd:
就是这种盲目无原理依据的研究测试弄晕了我, 有必要这么做吗? ...
js 两个小括号 ()() 的用法 -
wst0350:
多谢
oracle 触发器
HTML中实现右键菜单功能
我们使用的应用系统很多都有右键菜单功能。但是在网页上面,点击右键一般显示的却是IE默认的右键菜单,那么我们如何实现自己的右键菜单呢?下面将讲解右键菜单功能的实现原理和实现代码。
实现原理
在HTML语言中,基本上每个对象都有一个oncontextmenu事件,这个事件就是鼠标的右键单击事件(onclick事件是鼠标的左键单击事件),那么我们就可以在鼠标右击的时候,让系统弹出一个窗口(这个是popup窗口,显示在IE的最前面,没有菜单),上面显示我们想要显示的菜单信息,当我们单击其中某一项的时候,就执行我们设定的动作,然后将弹出窗口关闭。
实现代码
下面我写了一个示例代码,模拟一个树型菜单,当我们右键点击树型菜单某一项的时候,就会弹出右键菜单,里面有“新增”、“修改”、“删除”三个菜单项,单击某项会执行相应的操作。如果是在页面的其它地方点击右键的话,就只显示“新增”一个菜单项。下面的代码内容:
contextmenuDemo.html文件
―――――――――――――――――――――――――――――――――
<%--
/**
*实现右键菜单功能
*/
--%>
写道
<html>
<body oncontextmenu = showMenu('')>
<form name = "menuForm">
<!--隐藏框,用来保存选择的菜单的id值-->
<input type = "hidden" name = "id" value = "">
<table>
<tr><td><a href="javascript:clickMenu()" oncontextmenu = showMenu('0')>根目录</a></td></tr>
<tr><td><a href="javascript:clickMenu()" oncontextmenu = showMenu('1')>菜单一</a></td></tr>
<tr><td><a href="javascript:clickMenu()" oncontextmenu = showMenu('2')>菜单二</a></td></tr>
</table>
</form>
</body>
<!-- 这里用来定义需要显示的右键菜单 -->
<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" onclick="parent.create()">
新增
</td>
</tr>
<tr>
<td style="cursor:default;border:outset 1;" align="center" onclick="parent.update();">
修改
</td>
</tr>
<tr>
<td style="cursor:default;border:outset 1;" align="center" onclick="parent.del()">
删除
</td>
</tr>
</table>
</div>
<!-- 右键菜单结束-->
</html>
<body oncontextmenu = showMenu('')>
<form name = "menuForm">
<!--隐藏框,用来保存选择的菜单的id值-->
<input type = "hidden" name = "id" value = "">
<table>
<tr><td><a href="javascript:clickMenu()" oncontextmenu = showMenu('0')>根目录</a></td></tr>
<tr><td><a href="javascript:clickMenu()" oncontextmenu = showMenu('1')>菜单一</a></td></tr>
<tr><td><a href="javascript:clickMenu()" oncontextmenu = showMenu('2')>菜单二</a></td></tr>
</table>
</form>
</body>
<!-- 这里用来定义需要显示的右键菜单 -->
<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" onclick="parent.create()">
新增
</td>
</tr>
<tr>
<td style="cursor:default;border:outset 1;" align="center" onclick="parent.update();">
修改
</td>
</tr>
<tr>
<td style="cursor:default;border:outset 1;" align="center" onclick="parent.del()">
删除
</td>
</tr>
</table>
</div>
<!-- 右键菜单结束-->
<script language="JavaScript"> /** *根据传入的id显示右键菜单 */ function showMenu(id) { menuForm.id.value = id; if("" == id) { popMenu(itemMenu,100,"100"); } 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!"); } </script>
</html>
发表评论
-
cookie操作
2010-06-03 09:12 1027设置cookie每个cookie都是一个名/值对,可以把下面这 ... -
js 两个小括号 ()() 的用法
2010-06-02 18:08 14961JavaScript 中,考查如下代码: (functi ... -
javascript 的delete操作符
2010-06-02 17:36 2290最近重新温习JS,对delete操作符一直处于一知半解的状态, ... -
try catch finally
2010-05-31 08:38 1432try catch finally是javascript ... -
showModalDialog()、showModelessDialog()方法使用详解
2010-05-30 23:24 1486Javascript有许多内建的方法来产生对话框,如:wind ... -
window.event对象详细介绍
2010-05-30 23:11 26261、event代表事件的状态,例如触发event对象的元素、鼠 ... -
cookie跨域访问的问题
2010-05-14 14:41 4957cookie跨域访问的问题(多个项目间) 今天有一同 ... -
escape() encodeURI() encodeURIComponent() 区别
2010-04-26 18:03 977escape() 方法: 采用ISO ... -
javaScript 中函数对象 call 方法的使用
2010-04-20 20:44 1476javaScript 中的call() 是一个奇妙的方法,但也 ... -
js 数组 pop,push,unshift,splice,shift
2010-04-17 15:45 5907Js:数组的各种方法范例pop,push,unshift,sp ... -
window.showModalDialog 的使用
2010-03-20 11:04 935父窗口 var a = window.showModal ... -
js中escape,encodeURI,encodeURIComponent三个函数的区别
2010-02-06 19:09 836js对文字进行编码涉及3个函数:escape,encodeUR ... -
关于js中window.location.href,location.href,parent.location.href,top.location.href的用
2009-11-25 14:44 17952"window.location.href" ... -
window.location.href和window.location.replace的区别
2009-06-17 16:26 2488总是在资料上看到 window.location.href和w ... -
javascript 正则
2009-04-14 22:14 810javascript中与正则表达式有关的匹配字符串的函数主要有 ... -
javascript 小技巧
2009-04-01 10:27 794<!-- 另存为图片 --> ... -
javascript 小技巧
2009-03-27 20:08 964//最小化,最大化,关闭 <object id=min ... -
javascript 小技巧
2009-03-27 19:32 738text文本框 内容保存 <HTML> < ... -
javascript 小技巧
2009-03-27 19:30 724事件源对象 event.srcElement.tagName ... -
javascript 小技巧
2009-03-27 19:26 1004//setTimeout增加参数 <script> ...
相关推荐
本文解决的问题:1、实现右键菜单功能代码;2、阻止默认事件的实际应用。 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>右键菜单</title> <style ...
1、实现右键菜单功能代码。 2、阻止默认事件的实际应用。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>右键菜单</title> <style type="text/css...
主要介绍了JavaScript 自定义html元素鼠标右键菜单功能,本文通过实例代码给大家分享实现思路,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
1.首先 我们要禁用掉原网页中右键菜单 //JQuery代码 $(selector).on('contextmenu', function () { return false; }) 这样目标区域的右键菜单就无法使用了 demo1: <!DOCTYPE html> <html> <head> ...
添加右键菜单,首先我们要监听鼠标右键点击的操作,我们知道鼠标右键事件名是 contextmenu,当鼠标在 html 元素之上,点击鼠标右键,便会触发 contextmenu 事件,在 contextmenu 事件的回调函数中实现相应的显示菜单...
用户在每次使用的时候,都需要去先选中一条或者多条数据,然后在去点按钮进行相关操作,这样其实还是很麻烦的,做项目的过程中,为了用户着想,做了一个右键菜单,用户想要删除或者编辑某一条数据直接在其位置上右键...
html实现好看的多种风格导航菜单(附源码),导航菜单,源码下载,分为顶部导航菜单,悬浮按钮菜单,右键功能菜单,左侧导航菜单四种导航菜单。每种导航菜单有至少三种风格,总共23种风格,各种风格都有,代码上手简单,...
公司用到ztree。近期把工作中需要的做个...以上所述是小编给大家介绍的ztree实现右键收藏功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持!
今天来讲一个关于右键菜单的小demo,抛砖引玉。 首先,我们要用css和html做一个自定义右键菜单。 <!--自定义右键菜单html代码--> 功能1 功能2 功能3 功能4 功能5 /*css代码*/ #menu{ width: 0; /*设置为0...
在以前的一个公司内部管理系统(InnerOA)中,对于目录树的构造我采用的是dTree,实现无限级目录显示及右键菜单功能(右键菜单中包括:新建、修改、共享、删除、刷新等功能,如下图所示) 关于公司内部管理系统...
html中可对某个区域中鼠标右键实现菜单功能,方便菜单下的操作
加入了右击TAB选项卡时显示关闭的上下文菜单 具体实现代码: 右键菜单 HTML: 关闭 全部关闭 除此之外全部关闭 <div class=menu-sep></div> 当前页右侧全部关闭<
主要介绍了Bootstrap风格的zTree右键菜单功能,实现代码分为html,css和js三部分,代码简单易懂,非常不错,需要的朋友可以参考下
用html、css、js实现的windows桌面和窗口。包括开始菜单、状态蓝、窗口等。和windows系统操作方法一样,如双击图标打开窗口,不用的窗口最小化到状态蓝,右击桌面图标可打开右键菜单。开始菜单中附件---游戏中有常见...
echarts 实现树形图 的...非常详细的操作,包含右键菜单的实现功能。 如果需要更详细的使用支持,可以私信咨询小编或者评论区留言,小编会在第一时间及时回复。 感觉对您有所帮助的话,还请帮小编点赞收藏加关注哦。
*自定义的右键菜单,通过控件属性可自由排列及增减编辑器控件的右键菜单功能! *自动保存编辑器内容里的远程图片到本地的功能! *双击对象的属性检测,双击图片、链接、表格,层就会弹出相关的修改属性窗口! *更完善的...
JavaScript多级联动浮动菜单 第二版,包含仿京东商城商品分类菜单、仿window xp右键菜单、仿淘宝拼音索引菜单,上一个版本基本实现了多级联动和浮动菜单的功能,但效果不是太好,使用麻烦还有些bug,实用性不高。...
在这个项目里,包含了openlayers官网所没有的示例,包括动画、聚合图层、自定义工具等,详细下载看代码 在 openlayers 官方网站 -- ...contextmenu.html,地图鼠标右键菜单功能。