`

右键菜单的实现

HTML 
阅读更多

下面是简单的写了下。复杂的话请联系我.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`下的键值。我们需要在这些位置添加新的子键和值...

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

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

    pb9做的右键菜单

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

    Qt之QAbstractItemView视图项右键菜单

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

    flex添加右键菜单实例

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

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

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

    js树形菜单加右键菜单

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

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

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

    iframe里无右键菜单

    标题"iframe里无右键菜单"正是针对这一需求，描述中提到的解决方案是创建一个既简单又实用的方法来实现这一功能。 `contextmenu`是HTML5中的一个事件，它与右键菜单相关。当用户在页面上执行右键点击时，浏览器会...

    Delphi中添如何添加右键菜单

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

Magicbox
Global site tag (gtag.js) - Google Analytics