请问如何自定义web界面的右键菜单？

jsniu · 发表于 2011-4-5 23:04:55

我用web界面设计的程序中，在winform（已设置为web.form）中点击右键，会出来IE浏览器自带的右键菜单，我需要在点击右键时出现自己的菜单项，我使用了popmenu，但无效。请问该如何实现？如果不行，至少要去掉IE自带的右键菜单，又该如何做？

落伍者 · 发表于 2011-4-5 23:42:35

能发web界面的相关代码学习下不

zsunplus · 发表于 2011-4-6 15:22:52

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ch" xml:lang="ch">
  <head>
<meta name="generator" content="HTML Tidy for Windows (vers 14 February 2006), see www.w3.org" />
<style type="text/css">
body{font: 9pt "宋体"; margintop: 0px ; color: red; background: #ffffff}
a.{ font: 9pt "宋体"; cursor: hand; font-size: 9pt ; color: blue; text-decoration: none }
a:active{ font: 9pt "宋体"; cursor: hand; color: #FF0033 }
a.cc:hover{ font: 9pt "宋体"; cursor: hand; color: #FF0033}
.box{ font: 9pt "宋体"; position: absolute; background: LightGrey; }
</style>
  </head>
  <body>
<table id="itemopen" class="box c1" style="DISPLAY:none">
   <tr>
      <td>
      <a href="http://blog.csdn.net/Erickson/" class="cc">Erickson的专栏</a>
      </td>
   </tr>
   <tr>
      <td>
      <a href="http://www.csdn.net" class="cc">CSDN</a>
      </td>
   </tr>
   <tr>
      <td>
      <a href="http://www.google.com" class="cc">Google 搜索</a>
      </td>
   </tr>
   <tr>
      <td>
      <a href="http://www.sohu.com" class="cc">搜狐</a>
      </td>
   </tr>
   <tr>
      <td>
      <a href="http://www.yahoo.com" class="cc">Yahoo</a>
      </td>
   </tr>
   <tr>
      <td>
      <a href="http://www.163.com" class="cc">163 网站</a>
      </td>
   </tr>
   <tr>
      <td>
      <a href="http://sports.sina.com.cn" class="cc">新浪网体育</a>
      </td>
   </tr>
</table>
<script language="JavaScript" type="text/javascript">
document.onmousedown = function popUp() {             //右击鼠标显示快捷菜单：
      menu = document.all.itemopen
      if (event.button == 2) {
            newX = window.event.x + document.body.scrollLeft
            newY = window.event.y + document.body.scrollTop
            menu.style.display = ""
            menu.style.pixelLeft = newX
            menu.style.pixelTop = newY
      }
      else if (event.button == 1)
      {
            menu.style.display = "none"
      }
}
</script>
<script language="JavaScript" type="text/javascript">
var message="";
function clickIE()
{             //屏蔽IE默认的WinForm快捷菜单：
      if (document.all)
      {
            (message);
            return false;
      }
}
function clickNS(e)
{
      if (document.layers||(document.getElementById&&!document.all))
      {
            if (e.which==2)
            {
                     newX = window.event.x + document.body.scrollLeft
                     newY = window.event.y + document.body.scrollTop
                     menu = document.all.itemopen
                     if ( menu.style.display == "")
                     {
                              menu.style.display = "none"
                     }
                     else
                     {
                              menu.style.display = ""
                     }
                     menu.style.pixelLeft = newX
                     menu.style.pixelTop = newY
            }
            if (e.which==3)
            {
                     (message);
                     return false;
            }
      }
}
if (document.layers)
{
      document.captureEvents(Event.MOUSEDOWN);
      document.onmousedown=clickNS;
}
else
{
      document.onmouseup=clickNS;
  document.oncontextmenu=clickIE;
}
document.oncontextmenu=new Function("return false")
</script>
  </body>
</html>

jsniu · 发表于 2011-4-6 22:26:07

回复 zsunplus 的帖子

谢谢你的回答！

在html中用javascript是可以实现屏蔽原有的IE右键菜单，并使用自己的右键菜单，效果不错。不过我的使用环境略有不同，那些网页内容是现成的，我不太可能去修改每个网页。在这样的情况下，能否实现这个功能呢？

jsniu · 发表于 2011-4-6 22:56:44

回复落伍者的帖子

我是用现成的html代码来制作web界面的，所以比较简单。如果要自己制作复杂的web界面，就需要用到Dreamweaver等专业网页制作工具了。

附件是我用现成的html＋javascript代码制作的科学计算器。由于代码太长，无法发到论坛上，所以用附件方式上传，有兴趣的话可下载看看。

我想在这个软件中，去掉IE的右键菜单，换成自己的右键菜单，如果不改html代码，该如何实现？

科学计算器.rar (5.28 KB, 下载次数: 241)

look · 发表于 2011-4-7 07:37:36

1、函数原型：

wb.showMenu=function(x,y,id,ele){
return 是否显示默认菜单; }
2、函数说明：

当用户右键点击网页上的元素时,触发此事件,如果未定义些事件函数,弹出默认右键菜单.
x,y表示右键点击的坐标,而ele表示发生事件的节点对象, id表示节点的类型,有以下值:

id	说明
0/_CONTEXT_MENU_DEFAULT /	默认右键菜单
1/_CONTEXT_MENU_IMAGE/	图片右键菜单
2/_CONTEXT_MENU_CONTROL/	控件右键菜单
3/ONTEXT_MENU_TABLE/	表格
4/_CONTEXT_MENU_TEXTSELECT /	文本选区右键菜单
5/_CONTEXT_MENU_ANCHOR/	锚点,超链接
6/*_CONTEXT_MENU_UNKNOWN/	未知
10/_CONTEXT_MENU_VSCROLL/	垂直滚动条
11/_CONTEXT_MENU_VSCROLL/	水平滚动条

3、调用示例：

wb.showMenu=function(x,y,id,ele){ if( id == 4/*_CONTEXT_MENU_TEXTSELECT */ ) return true;//如果用户显示的是文本,显示默认菜单
//自定义弹出菜单
popmenu = win.ui.popmenu(winform);
popmenu.add('显示节点内容',function(id){
win.msgbox( ele.innerHTML )

});

popmenu.popup(x,y,true)

return false; //禁用默认菜单
}

jsniu · 发表于 2011-4-8 15:43:43

回复 look 的帖子

谢谢！这个看起来不错，我先试试看，有结果了再告诉你。

JacenHe · 发表于 2011-4-8 18:05:58

做web窗体，不能少了JQuery, 可以在WEB窗体上轻松实现漂亮的控件。
而且Js的语法与aardio也基本类似，基本上可以一看就懂，做出来的程序也会很漂亮。

jsniu · 发表于 2011-4-9 00:33:40

回复 jacen 的帖子

谢谢老大指点！我去学学JQuery。用JQuery除了aardio外，是否需要用到其它的IDE或开发工具呢？

qqmmcc · 发表于 2011-8-21 17:29:56

0.75版增加了web.form.menu库支持自定义右键菜单下面是软件自带的范例

//自定义右键菜单
import win.ui;
import web.form;
import web.form.menu;
/*DSG{{*/
var winform = win.form( bottom=417;scroll=1;right=667;text="aardio Form" )
winform.add( )
/*}}*/
//创建web窗体
var wb = web.form( winform );
var webmenu = web.form.menu( wb, {
[2/*_CONTEXT_MENU_CONTROL*/] = {
{ "撤消";"Undo"};
{ /*-----*/};
{ "剪切";"Cut"};
{ "复制";"Copy" };
{ "粘贴";"Paste"};
{ "删除";"Delete"};
{ /*-----*/};
{ "全选";"SelectAll"};
};
[4/*_CONTEXT_MENU_TEXTSELECT */] = {
{ "复制";"Copy"};
{ "粘贴";"Paste"};
{ "删除";"Delete"};
{ /*-----*/ };
{ "全选";"SelectAll"};
};
[5/*_CONTEXT_MENU_ANCHOR*/] = {
{ "复制链接";null;null;2262/*ID*/};
};
} )
wb.showMenu = function( x,y,id,ele ) {
return webmenu.popup( x,y,id,ele )
}
//打开目标网站
wb.go("http://www.baidu.com")
//显示窗体
winform.show();
wb.wait("");
//进入消息循环
win.loopMessage();
return winform,wb;

复制代码

jsniu · 发表于 2011-9-2 13:32:43

qqmmcc 发表于 2011-8-21 17:29
0.75版增加了web.form.menu库支持自定义右键菜单下面是软件自带的范例

aardio越来越强大了，这个非常方便。谢谢你的帮助！

叶城.HK · 发表于 2012-4-24 00:46:25

试验成功，谢谢。

jsniu · 发表于 2012-9-27 20:50:30

谢谢指点！新版的功能强大很多了。

		自动登录	找回密码
密码			注册会员

请问如何自定义web界面的右键菜单？

点评