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


Posted in Javascript onApril 11, 2010
<!--菜单样式--> 
<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这几个函数都是和菜单操作先关的,可以根据实际要求进行改造。
效果图如下:
利用JS重写Cognos右键菜单的实现代码
Javascript 相关文章推荐
javascript解决IE6下hover问题的方法
Jul 28 Javascript
js实现超酷的照片墙展示效果图附源码下载
Oct 08 Javascript
Windows下用PyCharm和Visual Studio开始Python编程
Oct 26 Javascript
Angular 页面跳转时传参问题
Aug 01 Javascript
几种二级联动案例(jQuery\Array\Ajax php)
Aug 13 Javascript
ionic隐藏tabs的方法
Aug 29 Javascript
js拼接html字符串的注意事项
Oct 13 Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
Mar 14 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
Apr 01 Javascript
原生javascript实现的全屏滚动功能示例
Sep 19 Javascript
webpack4 入门最简单的例子介绍
Sep 05 Javascript
JavaScript获取某一天所在的星期
Sep 05 Javascript
可以将word转成html的js代码
Apr 11 #Javascript
jquery 表格分页等操作实现代码(pagedown,pageup)
Apr 11 #Javascript
jquery 模拟雅虎首页的点击对话框效果
Apr 11 #Javascript
url 编码 js url传参中文乱码解决方案
Apr 11 #Javascript
jquery学习笔记二 实现可编辑的表格
Apr 09 #Javascript
jquery 图片截取工具jquery.imagecropper.js
Apr 09 #Javascript
跟着JQuery API学Jquery 之三 筛选
Apr 09 #Javascript
You might like
PHP的FTP学习(二)[转自奥索]
2006/10/09 PHP
深入array multisort排序原理的详解
2013/06/18 PHP
thinkPHP框架实现图像裁剪、缩放、加水印的方法
2017/03/14 PHP
Yii2.0框架实现带分页的多条件搜索功能示例
2019/02/20 PHP
js中的前绑定和后绑定详解
2013/08/01 Javascript
input禁止键盘及中文输入,但可以点击
2014/02/13 Javascript
解释&amp;&amp;和||在javascript中的另类用法
2014/07/28 Javascript
js Object2String方便查看js对象内容
2014/11/24 Javascript
js实现从中间开始往上下展开网页窗口的方法
2015/03/02 Javascript
JS简单实现String转Date的方法
2016/03/02 Javascript
Bootstrap学习笔记之css样式设计(2)
2016/06/07 Javascript
webix+springmvc session超时跳转登录页面
2016/10/30 Javascript
简单的渐变轮播插件
2017/01/12 Javascript
深入理解JavaScript中的尾调用(Tail Call)
2017/02/07 Javascript
BootStrap实现带关闭按钮功能
2017/02/15 Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
2017/07/12 Javascript
Nodejs进阶之服务端字符编解码和乱码处理
2017/09/04 NodeJs
jQuery实现所有验证通过方可提交的表单验证
2017/11/21 jQuery
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
2018/08/28 Javascript
vue-loader中引入模板预处理器的实现
2019/09/04 Javascript
Python中的startswith和endswith函数使用实例
2014/08/25 Python
python利用微信公众号实现报警功能
2018/06/10 Python
Python中的CSV文件使用&quot;with&quot;语句的方式详解
2018/10/16 Python
Python中pymysql 模块的使用详解
2019/08/12 Python
关于django 1.10 CSRF验证失败的解决方法
2019/08/31 Python
python3反转字符串的3种方法(小结)
2019/11/07 Python
python分布式计算dispy的使用详解
2019/12/22 Python
PyCharm Community安装与配置的详细教程
2020/11/24 Python
pandas按照列的值排序(某一列或者多列)
2020/12/13 Python
SQL面试题
2013/04/30 面试题
毕业生个人求职信范文分享
2014/01/05 职场文书
大学考试作弊检讨书
2014/01/30 职场文书
廉政教育的心得体会
2014/09/01 职场文书
解决numpy数组互换两行及赋值的问题
2021/04/17 Python
Vue项目打包、合并及压缩优化网页响应速度
2021/07/07 Vue.js
Mysql如何实现不存在则插入,存在则更新
2022/03/25 MySQL