`

右键菜单的实现

阅读更多

下面是简单的写了下。复杂的话请联系我.282215036

 

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
 <title>右键菜单功能</title>
<style>
.menu {
z-index:990;
border-right: black 2px outset;
border-top: black 1px outset;
visibility: hidden;
background:#EEE;
border-left: black 1px solid;
width: 170px;
cursor: hand;
line-height: 20px;
padding-top: 2px;
border-bottom: black 2px solid;
position: absolute;

text-align: left;
font-size: 12px;
margin: 10px 0px 0px;
font-family: "宋体";
}

.menuitems {
padding-right: 1px;
padding-left: 10px;
padding-bottom: 2px;
padding-top: 2px;
}
</style>
<script>
function highlightie(evt, classItems) {
   var event = evt || window.event;
   var element = event.srcElement || event.target;
   if (element.className == classItems) {
     element.style.backgroundColor = "#336699";
     element.style.outlineColor = "red";
     element.style.color = "white";
   }
}

function lowlightie(evt, classItems) {
   var event = evt || window.event;
   var element = event.srcElement || event.target;
   if (element.className == classItems) {
      element.style.backgroundColor = "";
      element.style.color = "black";
   }
}
 
var menuskin = "menu";
function showMenu() {
  var dbcw = document.body.clientWidth, dbch = document.body.clientHeight;
  var dbsl = document.body.scrollLeft, dbst = document.body.scrollTop;
  var event=getEvent();
  var rightedge = dbcw-event.clientX;
  var bottomedge = dbch-event.clientY;
  main_menu.style.display = ""; 
  if (rightedge < main_menu.offsetWidth)  {
     main_menu.style.left = (dbcw >= main_menu.offsetWidth) ? (dbcw - main_menu.offsetWidth) : 0;
  } else {
     main_menu.style.left = dbsl + event.clientX;
  }
  if (bottomedge < main_menu.offsetHeight) {
     main_menu.style.top = (dbch >= main_menu.offsetHeight) ? (dbch - main_menu.offsetHeight) : 0;
  } else {
     main_menu.style.top = dbst + event.clientY;
  }

  main_menu.style.visibility = "visible";
  event.returnValue = false;
  return false;
}   

function getEvent() {  
   if (document.all) {
  return window.event;
   }
   func=getEvent.caller;           
   while(func != null) {   
       var arg0=func.arguments[0];
       if(arg0) {
          if((arg0.constructor==Event || arg0.constructor ==MouseEvent)
             || (typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation)) {   
              return arg0;
          }
       }
       func=func.caller;
   }
   return null;
}

function hideAllMenu() {
  main_menu.style.display = "none";
}

function $(id){
 return document.getElementById(id);
}

function add() {
alert("小样,成功了!");
}

</script>
</head>
<body>
<div class="menu" id="main_menu" onmouseover="highlightie(event, 'menuitems');" onmouseout="lowlightie(event, 'menuitems');">
<div class="menuitems" onclick="add()">&nbsp;添加(点一下)</div>
<div class="menuitems">&nbsp;删除</div>
<hr />
<div class="menuitems">&nbsp;上移</div>
<div class="menuitems">&nbsp;下移</div>
</div>
<table width="2200" oncontextmenu="showMenu()";>
 <tr>
  <td width="180px"><input type="button" value="my name is xi pei" style="width:180px;"></td>
 </tr>
</table>
</body>
<script>
var main_menu = $("main_menu");
main_menu.className = menuskin;
document.body.onclick = hideAllMenu;
</script>
</html>

  • xp.rar (5.4 KB)
  • 下载次数: 306
分享到:
评论
2 楼 p_x1984 2009-08-20  
不好意思啊,在IE8上面我还没有测试过!
1 楼 wojiaojiangnan 2009-08-20  
ie8不可以啊

相关推荐

    jquery右键菜单实现

    而"jQuery右键菜单实现"是一个常见的需求,它允许用户在网页元素上右击鼠标时弹出一个自定义的菜单,提供额外的功能或选项。这个功能通常通过jQuery插件来实现,例如`jQuery contextMenu`。 `jQuery contextMenu`是...

    js(javascript)右键菜单实现

    js(javascript)右键菜单实现,js(javascript)右键菜单实现,js(javascript)右键菜单实现

    WPF分页DataGrid(二)列右键菜单实现

    在"WPF分页DataGrid"中介绍了如何实现分页功能,本文中介绍如果实现右键菜单。点击菜单项Age,将Age列隐藏,再点击则显示;并实现移动列后,同步显示。 详见:...

    C# ContextMenu 窗口右键菜单实现

    C# ContextMenu,上下文菜单,在窗体正文区点击右键弹出的菜单,支持多层次显示的右键菜单,大多数的窗体都具备类似的菜单效果,在C#中使用这种菜单,也是比较基本的吧,因此本例子对C#初学者来说,可能比较实用吧。

    jQueyr右键菜单实现

    本文将深入探讨如何使用jQuery实现右键菜单的功能,这在网页交互设计中是一个常见且实用的需求。 首先,右键菜单是网页中一种常见的用户交互元素,它通常在用户对页面元素进行鼠标右键点击时出现,提供一系列快捷...

    WPF 与 WinForm 调用系统右键菜单/资源管理器右键菜单/桌面右键菜单示例

    接下来,我们将详细讲解如何在WPF和WinForm中实现右键菜单的调用: **在WinForm中调用系统右键菜单**: 1. 创建一个`ContextMenuStrip`对象,用于承载右键菜单项。 2. 为控件添加`MouseClick`事件处理程序,检查...

    鼠标右键菜单实现(javascript)

    实现鼠标右键菜单,可以自己增加右键功能.

    动态及静态添加右键菜单策略

    它提供了快速访问常用功能的途径,而“动态及静态添加右键菜单策略”则是关于如何扩展这一功能的两个不同实现方式。本文将深入探讨这两种策略,并通过分析提供的两个工程——动态添加和静态添加右键菜单的实现方法,...

    Web右键菜单 很不错的右键菜单

    1. JavaScript:JavaScript是最常用的实现Web右键菜单的语言。通过监听`contextmenu`事件,可以捕获用户右键点击的行为,并根据需求弹出自定义菜单。 2. CSS:CSS用于美化自定义菜单的样式,包括字体、颜色、布局等...

    Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)

    在本例中,我们将探讨如何在Vue中实现Table组件行内右键菜单的功能,该项目是基于vue + AntDesign组件库实现的。 ### 知识点一:Vue + AntDesign Vue是目前流行的前端JavaScript框架之一,以数据驱动和组件化的...

    VC++在系统右键菜单中添加自定义菜单项

    首先,我们要理解系统右键菜单的实现原理。Windows操作系统使用注册表来存储右键菜单的相关信息,特别是在`HKEY_CLASSES_ROOT`或`HKEY_CURRENT_USER\Software\Classes`下的键值。我们需要在这些位置添加新的子键和值...

    pb9做的右键菜单

    在本场景中,“pb9做的右键菜单”是指使用PowerBuilder 9创建的自定义Windows操作系统右键快捷菜单功能。 右键菜单,也称为上下文菜单,是用户在鼠标右键点击时弹出的一系列操作选项,为用户提供快速访问常用功能的...

    echarts右键菜单实例 --- 不修改源码

    在ECharts中,用户可以通过自定义交互行为来增强图表的功能,例如添加右键菜单,以实现更多的操作选项。 标题“echarts右键菜单实例 --- 不修改源码”表明我们将探讨如何在ECharts图表上添加右键菜单,而无需直接...

    Qt之QAbstractItemView视图项右键菜单

    Qt之列表视图右键菜单实现,同理其他继承于QAbstractItemView的视图窗口也可以进行右键菜单实现

    flex添加右键菜单实例

    在Flex编程中,右键菜单(ContextMenu)是一个重要的交互元素,它可以为用户提供额外的操作选项。...通过理解并实践这个实例,开发者可以更好地掌握Flex中右键菜单的实现机制,并在实际项目中灵活运用。

    spreadjs_自定义右键菜单-demo.zip

    《SpreadJS 自定义右键菜单实现详解》 SpreadJS 是一款功能强大的 HTML5 表格控件,它提供了丰富的功能,使用户能够在浏览器中创建、编辑和显示电子表格。在这个"spreadjs_自定义右键菜单-demo.zip"压缩包中,我们...

    Delphi中添如何添加右键菜单

    在Delphi中添加右键菜单是一项常见的任务,它涉及到Windows API和组件的使用。下面将详细解释这个过程,包括所需的步骤、使用的API函数以及如何在Delphi程序中实现这一功能。 1. **基本概念** 右键菜单,也称为上...

    js树形菜单加右键菜单

    总的来说,结合使用JavaScript实现的树形菜单和右键菜单,可以提供一个高效且直观的用户界面,让用户在复杂的层级数据中进行导航和操作。这种技术在内容管理系统(CMS)、文件管理工具以及其他需要展现层次关系的Web...

    html5鼠标右键菜单点击文字提示代码

    以上就是一个简单的HTML5自定义右键菜单实现,通过结合JavaScript和HTML5的新特性,我们可以创建具有各种功能和样式的右键菜单,提供更丰富的用户交互体验。在实际项目中,可能还需要考虑菜单的响应式布局、菜单项的...

    删除右键菜单中的选项

    例如,某些特定的右键菜单行为可以通过调整这里的键值来实现。 ### 结论 通过上述步骤,我们可以有效地清理右键菜单中的冗余选项,使整个操作环境变得更加清爽高效。值得注意的是,在修改注册表前,最好备份当前的...

Global site tag (gtag.js) - Google Analytics