易截截图软件、单文件、免安装、纯绿色、仅160KB

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&


相关文档:

在winform中解析html标签

  最近在弄公司的系统时遇到一个问题,有一个winform要调用网站的数据库,数据库中存的是经过eWebEditor处理过的文章,都带有html标签,当时想用正则表达式过滤掉,但是还是放弃了原因有三:1.我对正则表达式了解很少;2.虽说我可以现学正则表达式,但是实现起来也是很麻烦的;3.如果过滤掉的话文章的格式就没有了。于 ......

Zen Coding: 一种快速编写HTML/CSS代码的方法


Zen Coding: 一种快速编写HTML/CSS代码的方法
来源:http://www.javaeye.com/news/13149
译自:Smashing Magazine
中文:Zen Coding: 一种快速编写HTML/CSS代码的方法
在本文中我们将展示一种新的使用仿CSS选择器的语法来快速开发HTML和CSS的方法。它由Sergey Chikuyonok开发。
你在写HTML代码(包括所有标签、属性、 ......

修改 html 标签属性

修改 checked 属性
     
    var sex = '${entity.sex}';
   if(sex == '男')
   {  
       
     //document.all.sexCk1.checked=true; 这种火狐不支持
 &nbs ......

GridView生成的HTML代码

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" CssClass="tablecss">
<Columns>
<asp:TemplateField HeaderText="编号" HeaderStyle-CssClass="aaa" ItemStyle-CssClass="bbb">
<ItemTemplate>
<%#Eval(" ......

html增行

<script   language="javascript">  
  function   newRow()  
  {  
    var   tbl   =   document.all("mytbl");  
    var   row   = &nb ......
© 2009 ej38.com All Rights Reserved. 关于E健网联系我们 | 站点地图 | 赣ICP备09004571号