知识库

推荐内容

快逸做的更好

产品优势

您的位置: 首页 > 报表技术分享 > 快逸报表上的右键菜单

快逸报表上的右键菜单

通过绑定页面对象的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 id=ie5menu onmouseover=highlightie5(event) onclick=jumptoie5(event); onmouseout=lowlightie5(event)>

<DIV url=”javascript:history.back();”>后退</DIV>

<DIV url=”javascript:history.forward();”>前进</DIV>

<HR>

<DIV url=”http://www.baidu.com” target=”_blank”>baidu</DIV>

<DIV url=”http://www.google.com” target=”_blank”>google</DIV>

<DIV url=”http://www.126.com” target=”_blank”>126</DIV>

<DIV 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>

本文标签: