炼狱:window.createPopup()弹出提示tips
CCBS 系统增加了新的需求,给界面上的Text文本输入框和Select下拉框增加信息提示。
对于Text输入框来说,实现起来并不难:重载Text文本框的onmouseover事件,然后显示出Text文本框的title也就可以了。
但是,对于Select控件来说就远远没有这么简单了。首先Select本身没有Title属性!无疑增加了实现的难度。
在网上找了点资料后,发现window.createPopup()函数可以实现弹出式的tips,而且微软的技术支持网站也有这方面的例子(参见:http://msdn.microsoft.com/workshop/samples/author/dhtml/popup/usingpopup.htm)。但是实现起来并不是那么一帆风顺的事情。
首先,window.createPopup()生成的窗口在显示的时候要手动指定该窗口的位置(x,y坐标),窗口的宽度和高度。而显示的内容是变化的,显示的字符串有长有短,窗口的长度和宽度也要跟着变化,如何实现呢?
其次,windows网页上的title属性在显示提示信息的时候是永远不会换行的,哪怕你显示的信息超过屏幕的显示范围它也不会顾忌到你的感受。windows标准就是我们的标准,我们也只能仿效了。
上面的两个问题着实让我困惑了一阵子,应该说是一个下午吧。不过最后问题还是得到解决了,虽然过程颇有些周折。
首先解决的是弹出窗口的指定位置,宽度和高度问题。窗口的位置就是响应鼠标事件的位置,但是该位置一定要区分清楚,鼠标如下几个位置的参数:clientX,clientY;offsetX,offsetY,screenX,screenY,x,y等。(具体每个位置的意义有单独的文章来解释)在这里应该是相对于响应控件的位置,使用的是offsetX,offsetY值。
要控制createPopuo()生成的窗口的宽度和高度,必须使用一个比较“土”的方法:首先调用oPopup.show(0,0,width,height)方法,马上获得该窗体的scrollWidth,scrollHeight,然后对该窗体隐藏:oPopup.hide()。获得具体的宽度和高度之后,再在具体的位置上显示真正的提示信息:
oPopup.show(x,y,scrollWidth,scrollHeight)。也就是说:在真正显示tips之前要调用一次显示方法获得实际的宽度和高度!这是解决问题的重点!!!
让显示的信息不换行的问题解决过程说难也不难,重要的是要能够想到该方法:使用table中的td不允许换行的属性:nowrap,那么包含在td中的内容就会一直显示出来,永远都不会换行了!!!
代码的范例如下:
var winPopup = window.createPopup(); //Create the window to popup
var winstr="<table style=/" border: 1 solid #FFA6CA/" border=/"0/" width=/"100%/" height=/"100%/" cellpadding=/"0/" cellspacing=/"0/" background=/"/" >";
winstr+="<tr><td align=/"center/"><table width=/"100%/" height=/"100%/" border=/"0/" cellpadding=/"0/" cellspacing=/"0/">";
winstr+="<tr><td nowrap id=/"tdMsg/" valign=/"center/" style=/"font-size:12px; color: red; face: Tahoma/"></td></tr></table></td></tr></table>";
winPopup.document.body.innerHTML = winstr;
var eventElement = null;
var xPos = 0;
var yPos = 0;
var timer = null;
/*************************************************************************
Function Name:showPopupHelp
Description:Popup a window that shows the content of text or select
Input Parameter:None
Output :None
Return:None
***********************************************************************/
function showPopupHelp(helpMsg)
{
initPopupWindow(helpMsg);
eventElement = event.srcElement;
xPos= window.event.offsetX;
yPos= window.event.offsetY;
timer = setTimeout("showPopupWindow()",1000);
}
/*************************************************************************
Function Name:hidePopupHelp
Description:Invisible the popup window
Input Parameter:None
Output :None
Return:None
***********************************************************************/
function hidePopupHelp()
{
clearTimeout(timer);
winPopup.hide();
}
/*************************************************************************
Function Name:initPopupWindow
Description:Initilize the popup window,draw the frame
Input Parameter:String to show
Output :None
Return:None
***********************************************************************/
function initPopupWindow(msgstr)
{
winPopup.document.all('tdMsg').innerText = msgstr;
}
/*************************************************************************
Function Name:showPopupWindow
Description:Visible the popup window
Input Parameter:None
Output :None
Return:None
***********************************************************************/
function showPopupWindow()
{
winPopup.show(0,0,10,10);
var h = winPopup.document.body.scrollHeight;
var w = winPopup.document.body.scrollWidth;
winPopup.hide();
//var w = eventElement.offsetWidth;
//var h = winPopup.document.body.scrollHeight;
//var x = eventElement.style.left;
//var y = eventElement.style.top + eventElement.offsetHeight;
var x = xPos + 3;
var y = yPos + 3;
winPopup.show(x,y,w,h,eventElement);
delete eventElement;
}