利用JS重寫(xiě)Cognos右鍵菜單的實(shí)現(xiàn)代碼
<!--菜單樣式-->
<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('查看歷史執(zhí)行情況');">查看歷史執(zhí)行情況</DIV>
<DIV class=menuitems clickcall="alert('查看批注');">查看批注</DIV>
<DIV class=menuitems clickcall="alert('插入/修改批注');">插入/修改批注</DIV>
<HR color=#aaaaaa size="0">
<DIV class=menuitems clickcall="alert('關(guān)于');">關(guān)于</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()//重寫(xiě)彈出菜單
{
var objName = getObjectName();
eval("oCV" + objName + ".rvMainWnd.displayContextMenu = displayContextMenu;");
}
function disableRightClick()
{
var objName = getObjectName();
eval("oCV" + objName + ".bCanUseCognosViewerContextMenu = false;");
}
/* 菜單相關(guān)函數(shù) 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";
}
}
/*菜單相關(guān)函數(shù) end*/
overWriteRightClick();
document.body.onclick = hideContextMenu;
</SCRIPT>
下面我來(lái)著介紹一下這段代碼,前面的style和div主要是定義菜單的現(xiàn)實(shí)樣式,其中引用樣式為menuitems的div中有個(gè)clickcall屬性,這個(gè)屬性就是當(dāng)點(diǎn)擊此菜單項(xiàng)時(shí)調(diào)用的JS函數(shù),可以將其改為自己的函數(shù),我這里只是簡(jiǎn)單的調(diào)用了個(gè)alert。
getObjectName函數(shù)中有個(gè)cv.id的對(duì)象,之前也有人問(wèn)過(guò)這個(gè)問(wèn)題,“cv.id”是干什么用的?cognos報(bào)表在ReportStudio運(yùn)行生成的對(duì)象和用URL請(qǐng)求生成的對(duì)象名稱是不一樣的,但是有規(guī)律可循,比如利用ReportStudio運(yùn)行生成的報(bào)表中CognosViewer的對(duì)象名為oCVRS,而用URL請(qǐng)求生成的cognosViewer對(duì)象名為oCV_NS_,大家可以查看兩次運(yùn)行結(jié)果的源文件來(lái)進(jìn)行比較,就比較直觀了。發(fā)現(xiàn)前綴都一樣(oCV)只是后面“RS”和“_NS_”不同,頁(yè)面中很多對(duì)象都是用的此規(guī)則,而cv.id存儲(chǔ)到正是后綴。這樣就可以拼湊出當(dāng)前運(yùn)行模式下的對(duì)象名了。
getRVContent函數(shù)獲取的是id為RVContent_NS_或RVContentRS的DIV對(duì)象,RVContent是展現(xiàn)用ReportStudio定義報(bào)表的內(nèi)容,不包含CognosViewer工具欄和標(biāo)題欄。
overWriteRightClick函數(shù)是將cognos右鍵調(diào)用的函數(shù)改為自己定義的函數(shù)。
disableRightClick函數(shù)已經(jīng)說(shuō)過(guò)了,禁用右鍵菜單。
displayContextMenu、hideContextMenu、highLightMenu、lowLightMenu這幾個(gè)函數(shù)都是和菜單操作先關(guān)的,可以根據(jù)實(shí)際要求進(jìn)行改造。
效果圖如下:
- JS組件Bootstrap ContextMenu右鍵菜單使用方法
- JS實(shí)現(xiàn)仿Windows7風(fēng)格的網(wǎng)頁(yè)右鍵菜單效果代碼
- 深入探討JavaScript、JQuery屏蔽網(wǎng)頁(yè)鼠標(biāo)右鍵菜單及禁止選擇復(fù)制
- js禁止頁(yè)面復(fù)制功能禁用頁(yè)面右鍵菜單示例代碼
- JavaScript 對(duì)任意元素,自定義右鍵菜單的實(shí)現(xiàn)方法
- ExtJs grid行 右鍵菜單的兩種方法
- javascript拖拽效果延伸學(xué)習(xí)
- 再次談?wù)揜eact.js實(shí)現(xiàn)原生js拖拽效果引起的一系列問(wèn)題
- 基于JavaScript實(shí)現(xiàn)右鍵菜單和拖拽功能
相關(guān)文章
BootstrapTable請(qǐng)求數(shù)據(jù)時(shí)設(shè)置超時(shí)(timeout)的方法
使用bootstrapTable獲取數(shù)據(jù)時(shí),有時(shí)由于網(wǎng)絡(luò)或者服務(wù)器的原因,無(wú)法及時(shí)獲取到數(shù)據(jù),頁(yè)面顯示一直處于等待狀態(tài)。為了改善效果,考慮設(shè)置超時(shí),請(qǐng)求發(fā)送后超時(shí)即顯示無(wú)數(shù)據(jù),過(guò)段時(shí)間重新發(fā)起請(qǐng)求2017-01-01
JS實(shí)現(xiàn)顏色的10進(jìn)制轉(zhuǎn)化成rgba格式的方法
這篇文章主要介紹了JS實(shí)現(xiàn)顏色的10進(jìn)制轉(zhuǎn)化成rgba格式的方法,涉及javascript針對(duì)顏色數(shù)值轉(zhuǎn)換的相關(guān)運(yùn)算操作技巧,需要的朋友可以參考下2017-09-09
js實(shí)現(xiàn)Element中input組件的部分功能并封裝成組件(實(shí)例代碼)
這篇文章主要介紹了純生js實(shí)現(xiàn)Element中input組件的部分功能(慢慢完善)并封裝成組件,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-03-03
JS+CSS實(shí)現(xiàn)動(dòng)態(tài)時(shí)鐘
這篇文章主要為大家詳細(xì)介紹了JS+CSS實(shí)現(xiàn)動(dòng)態(tài)時(shí)鐘,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-02-02
javascript實(shí)現(xiàn)劃詞標(biāo)記劃詞搜索功能修正版
javascript實(shí)現(xiàn)劃詞標(biāo)記劃詞搜索功能修正版...2006-12-12
利用JS判斷字符串是否含有數(shù)字與特殊字符的方法小結(jié)
在我們?nèi)粘9ぷ鞯臅r(shí)候,利用javaScript判斷一個(gè)字符串中是否包括有數(shù)字和"-",在一些表單提交的地方,這是比較有用的常規(guī)判斷,這里收集有幾種不同的方法,最后還將簡(jiǎn)要介紹下isNAN函數(shù)的使用方法和例子,有需要的朋友們可以參考借鑒,下面來(lái)一起看看吧。2016-11-11
layui數(shù)據(jù)表格 table.render 報(bào)錯(cuò)的解決方法
今天小編就為大家分享一篇layui數(shù)據(jù)表格 table.render 報(bào)錯(cuò)的解決方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
JS中比Switch...Case更優(yōu)雅的多條件判斷寫(xiě)法
這篇文章主要給大家介紹了關(guān)于JS中比Switch...Case更優(yōu)雅的多條件判斷寫(xiě)法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用JS具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09

