HTML中实现右键菜单功能
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&
相关文档:
文件类型 <HTML></HTML> (放在档案的开头与结尾)
文件主题 <TITLE></TITLE> (必须放在「文头」区块内)
文头 <HEAD></HEAD> (描述性资料,像是「主题」)
文体 <BODY></BODY> (文件本体)
结构性定义(由浏览器控制的显示风格)
标题 <H?></H?> ......
HTML和HTM文件在一次杀毒后都变成了可执行文件图标的样式。在网上搜索了若干方法都不得其解。最后查了一下资料,原来是注册表中有个可有可无的键值的存在造成的,这个就是:
HKEY_CLASSES_ROOT\htmlfile\ShellEx\lconHandler
删除lconHandler后,所有HTML和HTM文件都变成了未知文件的样式,还需要再到“控制面板&rdq ......
访问控件的主要对象是:document对象。分别对应当前文档所有的(子对象)个人观点。并且已经提供的几个主要方法来访问对象。
1. document.getElementById
2. document.getElementsByName
3 &n ......
百度了下 大体知道 如下区别:
id 代表唯一 ,在整个页面是唯一的,不能重复。
name 可以重复,整个页面的 name 可以都一样
用在JavaScript 中 时
document.getElementById("str") 返回的是 唯一的数据。
document.getElementsByName("str") 返回的是个数组。
还有什么区别?有待路人指证! ......
<script language="javascript">
function newRow()
{
var tbl = document.all("mytbl");
var row = &nb ......