用Popup对象构建网页右键菜单

最新推荐文章于 2019-05-24 11:58:55 发布
最新推荐文章于 2019-05-24 11:58:55 发布
阅读量1k 收藏
点赞数
分类专栏： HTML JS 网页设计学习与技巧 文章标签： div html javascript function

单击这里下载这段视频。

代码如下：

   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<TITLE>Popup对象实现右键菜单</TITLE>
<script language="JavaScript">
var oPopup = window.createPopup();
function contextMenu()
{
   
    var left = event.offsetX+10;
    var top = event.offsetY+10;
    oPopup.document.body.innerHTML = oContext.innerHTML;
    oPopup.show(left, top, 120, 80, window.document.body);
   
}
</script>
</head>
<body οncοntextmenu="contextMenu(); return false;">
<h1>Popup对象实现右键菜单</h1>
单击鼠标右键查看效果
<div ID="oContext" style="DISPLAY: none; BACKGROUND: #e4e4e4; ">
    <div οnmοuseοver="this.style.background='gold'"
         οnmοuseοut="this.style.background='#e4e4e4'"
       <span οnclick='parent.location.href="http://www.zol.com.cn"'>
    中关村在线</span>
    </div>
    <div οnmοuseοver="this.style.background='gold'"
         οnmοuseοut="this.style.background='#e4e4e4'"
    <span οnclick="parent.location.href='http://www.cfan.com.cn'">
    电脑爱好者</span>
    </div>
    <div οnmοuseοver="this.style.background='gold';"
         οnmοuseοut="this.style.background='#e4e4e4';">
    <span οnclick="parent.location.href='http://www.sina.com.cn'">
    新浪网</span>
    </div>
    <div οnmοuseοver="this.style.background='gold'"
         οnmοuseοut="this.style.background='#e4e4e4'"
    <span οnclick="parent.location.href='http://www.xinhuanet.com'">
    新华网</span>
    </div>
   
</div>
</body>
</html>

 

http://www.cnblogs.com/tyrael007/archive/2006/08/05/468821.html

 
JOHNCOOLS
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
一个右键菜单，支持不同对象不同菜单，兼容IE、Firefox
03-16
一个右键菜单，支持不同对象不同菜单，兼容IE、Firefox
js实现 html 鼠标右键 菜单
09-23
根目录 菜单一 菜单二 go 修改 删除 function showMenu(id){ menuForm.id.value = id; if("" == id){ } 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!"); }
右键弹出菜单——POPUP
e3160707的博客
05-14 1024
1
给IE浏览器增加自定义右键菜单
错位竞争，单点突破。
12-08 4568
其实就是类似当安装完 Flashget 后 Internet Explorer 的右键多了“使用网际快车下载”的选项一样，现在我们的需求是：当我们在图片右键时出现“复制图像地址”的选项。 其实很简单，先把下列代码存为 abc.reg 并导入： Windows Registry Editor Version 5.00 [HKEY_CURRENT_USER\Software\Micr
Labview 右键快捷菜单包及使用教程
最新发布
11-25
在这个“Labview 右键快捷菜单包及使用教程”中，我们将探讨如何通过扩展Labview的默认右键菜单来提高编程效率，特别是针对簇和类的操作。 1. **右键簇的快捷操作**： - **按名称捆绑**：在程序框图中，簇通常用来...
Openlayers扩展右键菜单
01-05
然而，有时候我们可能需要自定义特定的功能，比如右键菜单，来增强用户体验或提供更丰富的地图交互。 "OpenLayers扩展右键菜单"是一个项目，旨在帮助开发者为他们的OpenLayers地图应用添加自定义的右键上下文菜单。...
JS的无限极PopUP右键菜单美化版
08-18
在本案例中，我们探讨的是一个使用JavaScript实现的无限极PopUP右键菜单的美化版。这个菜单系统允许用户在网页上通过鼠标右键触发，呈现出层次分明、美观的下拉选项。 首先，让我们来理解"PopUP"的概念。PopUP在Web...
怎样使用右键菜单
12-17
通过这些文件，开发者可以构建一个自定义的右键菜单程序，让用户在特定环境下看到特定的菜单选项，实现个性化的操作体验。 总结来说，右键菜单是操作系统中的一个重要组成部分，它简化了用户与系统的交互。理解其...
javascript自定义右键弹出菜单实现方法
10-24
在JavaScript中，自定义右键弹出菜单是一种常见的交互式功能，它允许用户在点击鼠标右键...通过创建popup对象、构建菜单HTML结构、处理鼠标事件，我们可以创建出符合需求的自定义右键菜单，提高网站或应用的用户体验。
用popup实现右键多级菜单
adayfly的专栏
09-06 2265
网上已经有很多实现右键菜单的文章，本菜单也是在参考网上的经验之后写成。如有好的意见和建议欢迎留言本菜单的特点：1、可动态添加菜单项和子菜单2、可用css控制菜单表现菜单样式如下： 代码如下：popmenu.css .menuMain {  font-size: 12p;  background: #ffffff;     BORDER-RIGHT: gold 1
javascript自定义浏览器右键菜单
L511157586的博客
05-29 295
javascript自定义浏览器右键菜单 在书上看到document对象还有一个contextmenu事件，但是不知为什么w3school中找不到这个耶。。。 利用这个特性写了个浏览器的右键菜单，感觉挺不错，呵呵。。。 HTML部分(在<body></body>之间插入以下HTML)： 查看代码 <div id="menu"&...
在浏览器中隐藏右键菜单
陈锋的专栏
12-05 2304
方法一： function hidecontextmenu() { return false; } 方法二： function hideContextmenu() { window.event.returnValue = false; } //--> 方法三： d
跨浏览器的网页右键菜单的简单实现
Coder-qi's Blog
01-11 2123
本文主要叙述怎样实现右键菜单，以及跨浏览器的右键菜单的实现。     一般在网页页面按下鼠标右键（这个是在windows平台下，而在MAC中则是CTRL+点击），会显示默认的菜单，要显示自定义的右键菜单，则需要取消默认的浏览器行为，显示自定义的菜单。我们先来看一个事件：contextmenu事件，即上下文菜单事件，在windows95首先引入了上下文菜单的概念。不久这个概念逐步被引入web领域，
js自定义鼠标右键菜单
susuzhe
03-15 3476
我们在浏览器上点击右键会出现一些经常见的菜单，下面我将介绍如何自定义自己的菜单。 自定义右键菜单 body,ul,li{margin:0;padding:0;} body{font:12px/24px arial;} #menu{position:absolute;top:-9999px;left:-9999px;width:100px;border-radius:3px;list-s
【web】自定义浏览器鼠标右键菜单
Y.Cheng的博客
05-24 6861
我们电脑桌面，文件夹或者浏览器等等一些地方，鼠标左键功能都一样，鼠标右键各有各的功能，都对应各自功能需求而定制的菜单；所以我们也可以定制自己的个性右键菜单，让菜单更美观，更有个性。 这里就写出浏览器如何自定义菜单（电脑桌面的呢，抱歉超出了我能力范围了） 定制菜单如下： 样式的话，因人而异，你们随意发挥了 * { margin: 0; padding: 0; } ...
JavaScript实现通信平台接口对象与弹出菜单功能
`oncontextmenu`和`onselectstart`属性的禁用，意味着该程序可能防止了默认的右键菜单和文本选择行为，可能是为了提供自定义的上下文菜单体验。 4. C语言的使用： 尽管标题提到的是JavaScript，但这段代码展示了C#...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值