📄 jsballoon.js
字号:
if(selObjects[i].style.visibility=='visible' || selObjects[i].style.visibility=='')
{
if(ObjectOverlap(balloonDIV, selObjects[i]))
{
selObjects[i].style.visibility='hidden';
// Mark as ballonhidden
selObjects[i].baloonHidden=true;
}
}
}
}
}
function RestoreSelects()
{
var selObjects=document.getElementsByTagName("SELECT");
for(var i=0;i<selObjects.length;i++)
{
if(selObjects[i].baloonHidden)
{
selObjects[i].style.visibility='visible';
// Mark as ballonhidden
selObjects[i].baloonHidden=false;
}
}
}
function ObjectOverlap(obj1, obj2)
{
var obj1TopX = getLeft(obj1);
var obj1TopY = getTop(obj1);
var obj1BottomX = getLeft(obj1)+obj1.offsetWidth;
var obj1BottomY = getTop(obj1)+obj1.offsetHeight;
var obj2TopX = getLeft(obj2);
var obj2TopY = getTop(obj2);
var obj2BottomX = getLeft(obj2)+obj2.offsetWidth;
var obj2BottomY = getTop(obj2)+obj2.offsetHeight;
var overlapOnX = (obj1TopX < obj2BottomX && obj2TopX < obj1BottomX);
var overlapOnY = (obj1TopY < obj2BottomY && obj2TopY < obj1BottomY);
return (overlapOnX && overlapOnY);
}
//Positioning functions
function getObjLeft(anObject)
{
return(anObject.offsetParent ? (getObjLeft(anObject.offsetParent) + anObject.offsetLeft) : anObject.offsetLeft);
}
function getObjTop(anObject)
{
return(anObject.offsetParent ? (getObjTop(anObject.offsetParent) + anObject.offsetTop) : anObject.offsetTop);
}
function getLeft(anObject)
{
return(getObjLeft(anObject));
}
function getTop(anObject)
{
return(getObjTop(anObject));
}
function ScrollOffsets(anchor)
{
var aryScrolls = new Array(0,0);
try
{
var parentElem=anchor.parentElement;
while(parentElem!=null)
{
if(parentElem.scrollTop!=null)
{
aryScrolls[0]+=parseInt(parentElem.scrollTop, 10);
aryScrolls[1]+=parseInt(parentElem.scrollLeft, 10);
}
parentElem=parentElem.parentElement;
}
}
catch(ex)
{
// continue
}
return aryScrolls;
}
// Rendering functions
function balloonInfrastructure(body, direction)
{
var ret;
switch(direction)
{
case 'SE':
// South East
ret ='<table class="JSBalloon" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" >'+
' <tr>'+
' <td height="1" width="10">'+
' <img border="0" src="'+JSBalloonPath+'images/cLeftTop.gif" width="10" height="10"></td>'+
' <td height="7" width=100% style="border-top:1px solid #999999; border-left-width:1; border-right-width:1; border-bottom-width:1; background-color:#FFFFEA" colspan="4"></td>'+
' <td height="7" width="10">'+
' <img border="0" src="'+JSBalloonPath+'images/cRightTop.gif" width="10" height="10"></td>'+
' </tr>'+
' <tr>'+
' <td valign=top colspan="6" style="border-left: 1px solid #999999; border-right: 1px solid #999999; background-color: #FFFFEA">'+
body +
' </td>'+
' </tr>'+
' <tr>'+
' <td width="10" height="7">'+
' <img border="0" src="'+JSBalloonPath+'images/cLeftBottom.gif" width="10" height="10"></td>'+
' <td height="7" style="background-color: #FFFFEA" colspan="4" width="280"></td>'+
' <td width="10" height="7">'+
' <img border="0" src="'+JSBalloonPath+'images/cRightBottom.gif" width="10" height="10"></td>'+
' </tr>'+
' <tr>'+
' <td width="10" height="10"></td>'+
' <td width="1" style="border-top: 1px solid #999999; padding-left: 4; padding-right: 4; padding-top: 1; padding-bottom: 1" height="10"></td>'+
' <td height="10">'+
' <img border="0" src="'+JSBalloonPath+'images/aSouthEast.gif" width="67" height="18"></td>'+
' <td width=100% height="10" style="border-top: 1px solid #999999; padding-left: 4; padding-right: 4; padding-top: 1; padding-bottom: 1"></td>'+
' <td width="70" height="10" style="border-top: 1px solid #999999; padding-left: 4; padding-right: 4; padding-top: 1; padding-bottom: 1"></td>'+
' <td width="10" height="10"></td>'+
' </tr>'+
'</table>'
break;
case 'SW':
// South West
ret ='<table class="JSBalloon" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" id="AutoNumber1" >'+
' <tr>'+
' <td height="1" width="10">'+
' <img border="0" src="'+JSBalloonPath+'images/cLeftTop.gif" width="10" height="10"></td>'+
' <td height="7" width=179 style="border-top:1px solid #999999; border-left-width:1; border-right-width:1; border-bottom-width:1; background-color:#FFFFEA" colspan="4"></td>'+
' <td height="7" width="11">'+
' <img border="0" src="'+JSBalloonPath+'images/cRightTop.gif" width="10" height="10"></td>'+
' </tr>'+
' <tr>'+
' <td valign=top colspan="6" style="border-left: 1px solid #999999; border-right: 1px solid #999999; background-color: #FFFFEA"">'+
body +
' </td>'+
' </tr>'+
' <tr>'+
' <td width="10" height="7">'+
' <img border="0" src="'+JSBalloonPath+'images/cLeftBottom.gif" width="10" height="10"></td>'+
' <td height="7" style="background-color: #FFFFEA" colspan="4" width="179"></td>'+
' <td width="11" height="7">'+
' <img border="0" src="'+JSBalloonPath+'images/cRightBottom.gif" width="10" height="10"></td>'+
' </tr>'+
' <tr>'+
' <td width="10" height="10"></td>'+
' <td width="70" style="border-top: 1px solid #999999; border-left-width:1; border-right-width:1; border-bottom-width:1" height="10"></td>'+
' <td height="10" style="border-left-width: 1; border-right-width: 1; border-top: 1px solid #999999; border-bottom-width: 1" width="100%">'+
' </td>'+
' <td align="right">'+
' <img border="0" src="'+JSBalloonPath+'images/aSouthWest.gif" width="67" height="18"></td>'+
' <td width="1" height="10" style="border-top: 1px solid #999999;"></td>'+
' <td width="10" height="10"></td>'+
' </tr>'+
'</table>'
break;
case 'NE':
// North East
ret ='<table class="JSBalloon" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" id="AutoNumber1" >'+
' <tr>'+
' <td width="10" height="9"></td>'+
' <td width="1" style="border-bottom:1px solid #999999; " height="9"></td>'+
' <td height="9" valign="bottom">'+
' <img border="0" src="'+JSBalloonPath+'images/aNorthEast.gif" width="67" height="18"></td>'+
' <td width=100% height="9" style="border-bottom:1px solid #999999; "></td>'+
' <td width="70" height="9" style="border-bottom:1px solid #999999;"></td>'+
' <td width="10" height="9"></td>'+
' </tr>'+
' <tr>'+
' <td height="1" width="10">'+
' <img border="0" src="'+JSBalloonPath+'images/cLeftTop.gif" width="10" height="10"></td>'+
' <td height="7" width=100% colspan="4" bgcolor="#FFFFEA"></td>'+
' <td height="7" width="10">'+
' <img border="0" src="'+JSBalloonPath+'images/cRightTop.gif" width="10" height="10"></td>'+
' </tr>'+
' <tr>'+
' <td valign=top colspan="6" style="border-left: 1px solid #999999; border-right: 1px solid #999999; background-color: #FFFFEA">'+
body +
' </td>'+
' </tr>'+
' <tr>'+
' <td width="10" height="7">'+
' <img border="0" src="'+JSBalloonPath+'images/cLeftBottom.gif" width="10" height="10"></td>'+
' <td height="7" style="border-bottom:1px solid #999999; border-left-width:1; border-right-width:1; border-top-width:1" colspan="4" width="280" bgcolor="#FFFFEA"></td>'+
' <td width="10" height="7">'+
' <img border="0" src="'+JSBalloonPath+'images/cRightBottom.gif" width="10" height="10"></td>'+
' </tr>'+
'</table>'
break;
case 'NW':
// North West
ret ='<table class="JSBalloon" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" id="AutoNumber1" >'+
' <tr>'+
' <td width="10" height="10"></td>'+
' <td width="70" style="border-bottom:1px solid #999999; border-left-width:1; border-right-width:1; " height="10"></td>'+
' <td height="10" style="border-bottom:1px solid #999999; border-left-width: 1; border-right-width: 1; " width="100%">'+
' </td>'+
' <td align="right" valign="bottom">'+
' <img border="0" src="'+JSBalloonPath+'images/aNorthWest.gif" width="67" height="18"></td>'+
' <td width="1" height="10" style="border-bottom:1px solid #999999;"></td>'+
' <td width="10" height="10"></td>'+
' </tr>'+
' <tr>'+
' <td height="1" width="10">'+
' <img border="0" src="'+JSBalloonPath+'images/cLeftTop.gif" width="10" height="10"></td>'+
' <td height="7" width=179 colspan="4" bgcolor="#FFFFEA"></td>'+
' <td height="7" width="11">'+
' <img border="0" src="'+JSBalloonPath+'images/cRightTop.gif" width="10" height="10"></td>'+
' </tr>'+
' <tr>'+
' <td valign=top colspan="6" style="border-left: 1px solid #999999; border-right: 1px solid #999999; background-color: #FFFFEA">'+
body +
' </td>'+
' </tr>'+
' <tr>'+
' <td width="10" height="7">'+
' <img border="0" src="'+JSBalloonPath+'images/cLeftBottom.gif" width="10" height="10"></td>'+
' <td height="7" style="border-bottom:1px solid #999999; border-left-width:1; border-right-width:1; border-top-width:1" colspan="4" width="179" bgcolor="#FFFFEA"></td>'+
' <td width="11" height="7">'+
' <img border="0" src="'+JSBalloonPath+'images/cRightBottom.gif" width="10" height="10"></td>'+
' </tr>'+
'</table>'
break;
}
return ret;
}
function balloonBody(title, icon, body, footer, titleFontStyle,
messageFontStyle, footerFontStyle,
showCloseBox)
{
var imgShow='none';
var iconTitle='';
var ballonBody=body;
var imgClose='none';
var headerVisible='block';
var offsetParent="-7";
if(title!=undefined)
{
iconTitle=title;
}
if(showCloseBox)
{
imgClose='block';
}
else
{
imgClose='none';
}
if(icon != '')
{
imgShow='block';
}
else
{
imgShow='none';
}
if(imgShow=='none' && imgClose=='none' && iconTitle=='')
{
headerVisible='none';
offsetParent="0";
}
else
{
headerVisible='block';
offsetParent="-7";
}
return ' <table border="0" cellpadding="3" cellspacing="0" style="cursor:default;border-collapse: collapse; position:relative; top: '+offsetParent+';left:3" width="100%">' +
' <tr style="display:'+headerVisible+'">' +
' <td id="BIcon" width="3%" align=left><img id=BIcon src="'+icon+'" style="display:'+imgShow+'"></td>' +
' <td id="BTitle" UNSELECTABLE="on" width="90%" style="'+titleFontStyle+'" align=left>'+iconTitle+'</td>' +
' <td id="BClose" width="3%" valign=top align=right><img src="'+JSBalloonPath+'images/close.jpg" style="position:relative; top: 4;left:-5;display:'+imgClose+'" onmouseover="this.src=\''+JSBalloonPath+'images/closeActive.jpg\'" onmouseout="this.src=\''+JSBalloonPath+'images/close.jpg\'" onmouseup="this.src=\''+JSBalloonPath+'images/closeActive.jpg\'" onmousedown="this.src=\''+JSBalloonPath+'images/closeDown.jpg\'" title="Close"> </td>' +
' </tr>' +
' <tr>' +
' <td id="BBody" UNSELECTABLE="on" style="'+messageFontStyle+'" width="100%" colspan="3">' + ballonBody +'</td>' +
' </tr>' +
' <tr>' +
' <td id="BFooter" UNSELECTABLE="on" style="'+footerFontStyle+'" width="100%" colspan="3">' + footer +'</td>' +
' </tr>' +
' </table>'
}
}
/*
Section: Usage
Examples of the object instantiation.
Examples:
(start code)
var bl=new JSBalloon({ width:300});
var b2=new JSBalloon();
var b3=new JSBalloon({ width:150,
autoAway:false,
autoHide:false,
showCloseBox:true});
(end)
Section: Include Setup Notes
Please read before installing.
Set the global variable JSBalloonPath to the full application path (or URL) where
it is located.
Make sure you included the trailing forward slash.
Examples:
- var JSBalloonPath="/appname/includes/js/JSBalloon/";
- var JSBalloonPath="http://prodserver/appname/includes/js/JSBalloon/";
*/
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -