利用JS重写Cognos右键菜单的实现代码

复制代码 代码如下:

<!--菜单样式-->
<STYLE type=text/css>
.cMenu {
BORDER-RIGHT: #000000 1px solid;
BORDER-TOP: #000000 1px solid;
FONT-WEIGHT: normal;
FONT-SIZE: 14px;
VISIBILITY: hidden;
BORDER-LEFT: #000000 1px solid;
WIDTH: 150px;
CURSOR: default;
COLOR: #000000;
LINE-HEIGHT: 20px;
BORDER-BOTTOM: #000000 1px solid;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
POSITION: absolute;
BACKGROUND-COLOR: #eeeeff
}
.menuitems {
PADDING-RIGHT: 5px;
PADDING-LEFT: 5px
}
</STYLE>
<DIV class=cMenu id="contextMenu" onmouseover=highLightMenu() onmouseout=lowLightMenu()>
<DIV class=menuitems clickcall="alert('查看历史执行情况');">查看历史执行情况</DIV>
<DIV class=menuitems clickcall="alert('查看批注');">查看批注</DIV>
<DIV class=menuitems clickcall="alert('插入/修改批注');">插入/修改批注</DIV>
<HR color=#aaaaaa size="0">
<DIV class=menuitems clickcall="alert('关于');">关于</DIV>
</DIV>
<SCRIPT type="text/javascript">
var contextMenu = document.getElementById("contextMenu");
function getObjectName()
{
return document.getElementById("cv.id").value;
}
function getRVContent()
{
var objName = getObjectName();
return eval("document.getElementById('RVContent" + objName + "');");
}
function overWriteRightClick()//重写弹出菜单
{
var objName = getObjectName();
eval("oCV" + objName + ".rvMainWnd.displayContextMenu = displayContextMenu;");
}
function disableRightClick()
{
var objName = getObjectName();
eval("oCV" + objName + ".bCanUseCognosViewerContextMenu = false;");
}
/* 菜单相关函数 start*/
function displayContextMenu(evt) {
evt = (evt) ? evt : ((event) ? event : null);
hideContextMenu();
var rightedge = getRVContent().clientWidth - evt.clientX;
var bottomedge = getRVContent().clientHeight - evt.clientY;
if (rightedge < contextMenu.offsetWidth)
contextMenu.style.left = getRVContent().scrollLeft + evt.clientX - contextMenu.offsetWidth - getRVContent().offsetLeft;
else
contextMenu.style.left = getRVContent().scrollLeft + evt.clientX - getRVContent().offsetLeft;
if (bottomedge < contextMenu.offsetHeight)
contextMenu.style.top = getRVContent().scrollTop + evt.clientY - contextMenu.offsetHeight - getRVContent().offsetTop;
else
contextMenu.style.top = getRVContent().scrollTop + evt.clientY - getRVContent().offsetTop;
contextMenu.style.visibility = "visible";
return false;
}
function hideContextMenu() {
var object = event.srcElement;
contextMenu.style.visibility = "hidden";
if (object.className == "menuitems") {
eval(object.clickcall);
}
}
function highLightMenu() {
var object = event.srcElement;
if (object.className == "menuitems") {
object.style.backgroundColor = "highlight";
object.style.color = "white";
}
}
function lowLightMenu() {
var object = event.srcElement;
if (object.className == "menuitems") {
object.style.backgroundColor = "";
object.style.color = "black";
}
}
/*菜单相关函数 end*/
overWriteRightClick();
document.body.onclick = hideContextMenu;
</SCRIPT>

下面我来着介绍一下这段代码,前面的style和div主要是定义菜单的现实样式,其中引用样式为menuitems的div中有个clickcall属性,这个属性就是当点击此菜单项时调用的JS函数,可以将其改为自己的函数,我这里只是简单的调用了个alert。
getObjectName函数中有个cv.id的对象,之前也有人问过这个问题,“cv.id”是干什么用的?cognos报表在ReportStudio运行生成的对象和用URL请求生成的对象名称是不一样的,但是有规律可循,比如利用ReportStudio运行生成的报表中CognosViewer的对象名为oCVRS,而用URL请求生成的cognosViewer对象名为oCV_NS_,大家可以查看两次运行结果的源文件来进行比较,就比较直观了。发现前缀都一样(oCV)只是后面“RS”和“_NS_”不同,页面中很多对象都是用的此规则,而cv.id存储到正是后缀。这样就可以拼凑出当前运行模式下的对象名了。
getRVContent函数获取的是id为RVContent_NS_或RVContentRS的DIV对象,RVContent是展现用ReportStudio定义报表的内容,不包含CognosViewer工具栏和标题栏。
overWriteRightClick函数是将cognos右键调用的函数改为自己定义的函数。
disableRightClick函数已经说过了,禁用右键菜单。
displayContextMenu、hideContextMenu、highLightMenu、lowLightMenu这几个函数都是和菜单操作先关的,可以根据实际要求进行改造。
效果图如下:

时间: 2010-04-10

再次谈论React.js实现原生js拖拽效果引起的一系列问题

React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做出来以后,发现这套东西很好用,就在2013年5月开源了.由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单.所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具. 前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘

深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制

我记得在刚开始接触动态HTML及JavaScript时就接触过关于鼠标右键屏蔽的脚本代码,当时这些代码很多会用在防止浏览者未经允许的复制网页上的文字或者其他内容,后来的实际应用证明这种做法是不符合用户体验的,而且破解的方法也有很多,比如我曾经写过一篇文章讲解如何解除网页禁止复制的办法. 由此可见,限制右键及复制是不明智的做法,但是今天我仍然要谈谈关于禁止网页复制.右键菜单的事儿,因为随着网页APP技术的发展,网页应用和桌面应用之间的界限越来越模糊,有一些桌面程序实际上是由网页配合JavaScri

ExtJs grid行 右键菜单的两种方法

在这下边: 方法一 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="gridContextMenu.aspx.cs" Inherits="gridContextMenu" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &

JS实现仿Windows7风格的网页右键菜单效果代码

本文实例讲述了JS实现仿Windows7风格的网页右键菜单效果代码.分享给大家供大家参考.具体如下: 这是一款JS仿Windows7风格的网页右键菜单,可以多级展开的右键菜单,原生JS.可参考性强,学习JavaScript的朋友不可错过.本菜单用户体验极佳,兼容性良好,无jQuery. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-win7-style-web-right-menu-codes/ 具体代码如下: <!DOCTYPE htm

JavaScript 对任意元素,自定义右键菜单的实现方法

一.一些概念: 1.鼠标事件有一个botton属性:返回一个整数,用于表示点击的是哪个鼠标按键. BUG:在IE和标准DOM的鼠标事件中,唯一一个button属性值相同的是"单击右键"事件,都返回2. 2.事件onmousedown:表示鼠标按键按下的动作. 事件oncontextmenu:点击鼠标触发的另一个事件. 3.中断默认事件处理函数的方法:IE中设置returnValue=false;  标准DOM中调用preventDefault()方法. 4.事件对象:①在IE中,事件对

javascript拖拽效果延伸学习

本文总结一下,拖拽所延伸出来的一些效果,供大家参考,具体内容如下 1.实现拖拉图片时,带框的效果.即当鼠标拖动某一个图片或物体时,其原有位置扔保留其型. 这种效果,其实很简单,主要是另外创建一个物体,使其与被拖拽的物体,宽和高一样,然后,将其变为拖拽的对象. 直接上代码: <html <head> <style> #div1 {width:100px; height:100px; background:yellow; position:absolute;} .box{bord

JS组件Bootstrap ContextMenu右键菜单使用方法

今天来总结下bootstrap的一个小组件的应用.好了,不说废话,进入正题吧. 一.ContextMenu介绍 一个需求:表格行调序,支持多选调序,并且可以不连续多选.什么意思呢?先来看看需要实现的效果图: 需求是:需要将选中的6.8.9行移动到第2行和第3行之间.撇开业务不说,单纯从技术层面来说,要想使用最少操作达到上述效果,博主想到了右键功能,如果能够在第2行或者第3行上面点击鼠标右键,通过右键菜单功能将选中的行移动到相应的位置,这样是不是最简单呢.说做咱就做,于是找组件,搜索"bootst

基于JavaScript实现右键菜单和拖拽功能

下面先给大家介绍下js实现的右键菜单功能,具体详情如下所示: 这一章解决的问题 1.实现右键菜单功能代码. 2.阻止默认事件的实际应用. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>右键菜单</title> <style type="text/css"> #menu {

js禁止页面复制功能禁用页面右键菜单示例代码

<body oncontextmenu="return false">禁用网页右键菜单,但是仍然可以使用快捷键复制. js代码禁用复制功能: 复制代码 代码如下: <script type="text/javascript"> document.body.onselectstart=document.body.oncontextmenu=function(){ return false;} </script> 注意这段代码必须放在

JS实现不使用图片仿Windows右键菜单效果代码

本文实例讲述了JS实现不使用图片仿Windows右键菜单效果代码.分享给大家供大家参考,具体如下: 这里演示JS不使用图片仿Windows右键菜单效果,这款代码灵活使用了文鼎字,配合CSS和JS做出了这个和系统右键菜单很相似的东东. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-windows-right-button-menu-codes/ 具体代码如下: <HTML> <HEAD> <TITLE>极酷的多级右

3种不同的ContextMenu右键菜单实现代码

简单使用的右键菜单,希望能帮助大家.下面是截图和实例代码 实例预览 <!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"> <head>

js实现鼠标点击左上角滑动菜单效果代码

本文实例讲述了js实现鼠标点击左上角滑动菜单效果代码.分享给大家供大家参考.具体如下: 这里需要鼠标点击激活的网页左上角菜单,不点击不会滑出来,可以改造成二级菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-click-hd-show-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo

js实现的简洁网页滑动tab菜单效果代码

本文实例讲述了js实现的简洁网页滑动tab菜单效果代码.分享给大家供大家参考.具体如下: 这里介绍的是一款风格简洁的网页滑动门代码,基于JS和Div+CSS实现.滑动门菜单,只需鼠标放上去就切换的菜单,和网页选项卡只是操作形式上的不同而已,滑动门改选项卡只需将门菜单中的onmouseover换成onclick就行了,这样换了之后,切换内容需要鼠标点击门菜单才可以. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-div-hd-tab

JS+CSS实现大气清新的滑动菜单效果代码

本文实例讲述了JS+CSS实现大气清新的滑动菜单效果代码.分享给大家供大家参考,具体如下: 这是一款比较大气清新的滑动导航菜单,CSS和JavaScript配合完成,鼠标放到一级菜单上,会滑出二级的菜单,兼容性也不错,适合大多数网站使用,用到两张背景图片,请拷贝图片地址下载图片. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-dqqx-scroll-menu-demo/ 具体代码如下: <!DOCTYPE html PUBLIC

JS+CSS实现的竖向简洁折叠菜单效果代码

本文实例讲述了JS+CSS实现的竖向简洁折叠菜单效果代码.分享给大家供大家参考,具体如下: 这是一款JS+CSS竖向简洁的折叠菜单,支持三级分类,红色垂直型,个人感觉非常棒,希望大家喜欢. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-simple-zd-menu-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "

js实现的黑背景灰色二级导航菜单效果代码

本文实例讲述了js实现的黑背景灰色二级导航菜单效果代码.分享给大家供大家参考.具体如下: 这是一款js实现的黑背景灰色二级导航菜单,兼容IE6.firefox的js+css横向二极导航菜单.挺简洁,不过很清新,二级菜单是水平显示在主菜单的下方,采用流行的微软雅黑字体,若不想用这种字体,可换成默认的宋体即可. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-black-bgcolor-2level-nav-style-codes/ 具体代码如

js基于面向对象实现网页TAB选项卡菜单效果代码

本文实例讲述了js基于面向对象实现网页TAB选项卡菜单效果代码.分享给大家供大家参考.具体如下: 这是一款自动的网页TAB,基于面向对象的选项卡菜单,由于时间关系只做了简单的实现,界面没有美化,不多做介绍了. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/js-mxdx-tab-cha-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio