集智平台报表上的右键菜单
通过绑定页面对象的oncontextmenu,实现在鼠标右键点报表区域时弹出右键菜单。
<HEAD><TITLE></TITLE>
<META http-equiv=Content-Type content=”text/html; charset=gb2312″>
<STYLE>BODY {
FONT-SIZE: 12px; MARGIN: 10px 0px 0px; FONT-FAMILY: “宋体“
}
.skin0 {
BORDER-RIGHT: black 2px solid; BORDER-TOP: black 2px solid; VISIBILITY: hidden; BORDER-LEFT: black 2px solid; WIDTH: 100px; CURSOR: default; LINE-HEIGHT: 20px; PADDING-TOP: 4px; BORDER-BOTTOM: black 2px solid; FONT-FAMILY: “宋体“; POSITION: absolute; BACKGROUND-COLOR: menu; TEXT-ALIGN: left
}
.skin1 {
BORDER-RIGHT: buttonhighlight 2px outset; BORDER-TOP: buttonhighlight 2px outset; FONT-SIZE: 10pt; VISIBILITY: hidden; BORDER-LEFT: buttonhighlight 2px outset; WIDTH: 100px; CURSOR: default; PADDING-TOP: 4px; BORDER-BOTTOM: buttonhighlight 2px outset; FONT-FAMILY: “宋体“; POSITION: absolute; BACKGROUND-COLOR: menu; TEXT-ALIGN: left
}
.menuitems {
PADDING-RIGHT: 1px; PADDING-LEFT: 10px; PADDING-BOTTOM: 2px; PADDING-TOP: 2px
}
</STYLE>
<SCRIPT language=javascript>
<!–
//定义菜单显示的外观,可以从上面定义的2种格式中选择其一
var menuskin = “skin0″;
//是否在浏览器窗口的状态行中显示菜单项目条对应的链接字符串
var display_url = false;
function getEvent(){ //同时兼容ie和ff的写法
if(document.all) return window.event;
func=getEvent.caller;
while(func!=null){
var arg0=func.arguments[0];
if(arg0){
if((arg0.constructor==Event || arg0.constructor ==MouseEvent)
|| (typeof(arg0)==”object” && arg0.preventDefault && arg0.stopPropagation)){
return arg0;
}
}
func=func.caller;
}
return null;
}
function showmenuie5() {
//获取当前鼠标右键按下后的位置,据此定义菜单显示的位置
var event=arguments[0] || window.event;
var rightedge = document.body.clientWidth-event.clientX;
var bottomedge = document.body.clientHeight-event.clientY;
//如果从鼠标位置到窗口右边的空间小于菜单的宽度,就定位菜单的左坐标(Left)为当前鼠标位置向左一个菜单宽度
if (rightedge <ie5menu.offsetWidth)
ie5menu.style.left = document.body.scrollLeft + event.clientX – ie5menu.offsetWidth;
else
//否则,就定位菜单的左坐标为当前鼠标位置
ie5menu.style.left = document.body.scrollLeft + event.clientX;
//如果从鼠标位置到窗口下边的空间小于菜单的高度,就定位菜单的上坐标(Top)为当前鼠标位置向上一个菜单高度
if (bottomedge <ie5menu.offsetHeight)
ie5menu.style.top = document.body.scrollTop + event.clientY – ie5menu.offsetHeight;
else
//否则,就定位菜单的上坐标为当前鼠标位置
ie5menu.style.top = document.body.scrollTop + event.clientY;
//设置菜单可见
ie5menu.style.visibility = “visible”;
return false;
}
function hidemenuie5() {
//隐藏菜单
//很简单,设置visibility为hidden就OK!
ie5menu.style.visibility = “hidden”;
}
function highlightie5(evt) {
//高亮度鼠标经过的菜单条项目
//如果鼠标经过的对象是menuitems,就重新设置背景色与前景色
//event.srcElement.className表示事件来自对象的名称,必须首先判断这个值,这很重要!
var event=evt || window.event;
var element=event.srcElement || event.target;
if (element.className == “menuitems”) {
element.style.backgroundColor = “highlight”;
element.style.color = “white”;
//将链接信息显示到状态行
//event.srcElement.url表示事件来自对象表示的链接URL
if (display_url)
window.status = event.srcElement.url;
}
}
function lowlightie5(evt) {
//恢复菜单条项目的正常显示
var event=evt || window.event;
var element=event.srcElement || event.target;
if (element.className == “menuitems”) {
element.style.backgroundColor = “”;
element.style.color = “black”;
//window.status = “”;
}
}
//右键下拉菜单功能跳转
function jumptoie5(evt) {
//转到新的链接位置
var event=evt || window.event;
var element=event.srcElement || event.target;
//var seltext=window.document.selection.createRange().text
if (element.className == “menuitems”) {
//如果存在打开链接的目标窗口,就在那个窗口中打开链接
if (element.getAttribute(“target”) != null)
{
window.open(element.getAttribute(“url”), element.getAttribute(“target”));
}
else
//否则,在当前窗口打开链接
window.location = element.getAttribute(“url”);
}
}
//–>
</SCRIPT>
<META content=”MSHTML 6.00.2900.3059″ name=GENERATOR></HEAD>
页面中菜单所在的层内容:
<DIV class=skin0 id=ie5menu onmouseover=highlightie5(event) onclick=jumptoie5(event); onmouseout=lowlightie5(event)>
<DIV class=menuitems url=”javascript:history.back();”>后退</DIV>
<DIV class=menuitems url=”javascript:history.forward();”>前进</DIV>
<HR>
<DIV class=menuitems url=”http://www.baidu.com” target=”_blank”>baidu</DIV>
<DIV class=menuitems url=”http://www.google.com” target=”_blank”>google</DIV>
<DIV class=menuitems url=”http://www.126.com” target=”_blank”>126</DIV>
<DIV class=menuitems url=”http://www.163.com” target=”_blank”>163</DIV>
</DIV>
在集智平台上绑定右键菜单:
<SCRIPT language=JavaScript1.2>
//如果当前浏览器是Internet Explorer,document.all就返回真
//选择菜单方块的显示样式
//ie5menu=document.getElementById(“ie5menu”);
ie5menu.className = menuskin;
//重定向鼠标右键事件的处理过程为自定义程序showmenuie5
document.getElementById(“report1“).oncontextmenu = showmenuie5;
//重定向鼠标左键事件的处理过程为自定义程序hidemenuie5
document.body.onclick = hidemenuie5;
</SCRIPT>