集智平台报表上的右键菜单

生成右键菜单的效果:

通过绑定页面对象的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(){     //同时兼容ieff的写法 

       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() { 

//隐藏菜单 

//很简单,设置visibilityhiddenOK 

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 Explorerdocument.all就返回真 

 //选择菜单方块的显示样式 

//ie5menu=document.getElementById(“ie5menu”); 

ie5menu.className = menuskin; 

 //重定向鼠标右键事件的处理过程为自定义程序showmenuie5 

document.getElementById(“report1“).oncontextmenu = showmenuie5; 

 //重定向鼠标左键事件的处理过程为自定义程序hidemenuie5 

document.body.onclick = hidemenuie5; 

 </SCRIPT>