将鼠标移到列表里的名字时，在名字旁边展开一个层，显示该人的详细信息

baobeituping

浏览: 1065286 次
性别:
来自: 长沙

最近访客更多访客>>

lindow

huazai740

Java技术干货

ccsxin201

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JS篇

CSS

<head>
<link href="style.css" rel="stylesheet" type="text/css" />
<style>
#popupcontent{ position: absolute; visibility: hidden; overflow: hidden; border:1px solid #CCC; background-color:#F9F9F9; border:1px solid #333; padding:5px;}

</style>

上面的样式是定义弹出表格的样式
<script>
var baseText = null;
function showPopup(w,h,HtmlID,PerID,PerName,PerPartName,PerExtension,PerTnum,PerEmail,PerPhotoFile,PerSeatID)
{
var ID=PerID;
var Name=PerName;
var Email=PerEmail;
var Tnum=PerTnum;
var Extension=PerExtension;
var DeptName="";
var PartName=PerPartName;
var PhotoFile=PerPhotoFile;
var SeatID=PerSeatID;
var tempobj = document.getElementById(HtmlID);
//下面的函数是为了得到鼠标所移动到位置的网页里面的坐标

var pos = getAbsolutePosition(tempobj);
//下面就是根据所取得的网页里的坐标显示层的位置
var popUp = document.getElementById("popupcontent");
popUp.style.top = pos.y+"px";
popUp.style.left = pos.x+"px";
popUp.style.width = w + "px";
popUp.style.height = h + "px";
if (baseText == null) baseText = popUp.innerHTML;
popUp.innerHTML = baseText +
"<div id=\"statusbar\" ><table width=\"440\" border=\"0\" align=\"center\" cellpadding=\"3\" cellspacing=\"1\" bgcolor=\"#CCCCCC\" style=\"font-size:12px; line-height:23px\">"
+"<tr> <td width=\"38%\" rowspan=\"7\" align=\"center\" bgcolor=\"#FFFFFF\" style=\"padding:6px; background:#EEE\"><img src='"+PhotoFile+"'></td> <td bgcolor=\"#FFFFFF\">员工编码："+ID+"</td></tr>"
+"<tr><td bgcolor=\"#FFFFFF\">姓       名："+Name+"</td></tr>"
+"<tr><td bgcolor=\"#FFFFFF\">座位号："+SeatID+"</td></tr>"
+"<tr><td bgcolor=\"#FFFFFF\">职       务："+PartName+"</td></tr>"
+"<tr><td bgcolor=\"#FFFFFF\">分       机："+Extension+"</td></tr>"
+"<tr><td bgcolor=\"#FFFFFF\">T        数："+Tnum+"</td></tr>"
+"<tr><td bgcolor=\"#FFFFFF\">邮       箱："+Email+"</td></tr>"
+"<tr><td colspan=\"2\" align=\"center\" bgcolor=\"#FFFFFF\" style=\"padding:6px 0\"><input name=\"maximbutton\" class=\"tbbutton\" type=\"button\" class=\"tbbutton\" value=\"关闭\" onclick=\"hidePopup();\"></td></tr>"

+"</table>"
+"</div>";
var sbar = document.getElementById("statusbar");
//sbar.style.marginTop = (parseInt(h)-60) + "px";
popUp.style.visibility = "visible";
}

//隐藏弹出表格函数
function hidePopup()
{
var popUp = document.getElementById("popupcontent");
popUp.style.visibility = "hidden";
}

//获得网页坐标函数
function getAbsolutePosition(obj)
{
    position = new Object();
    position.x = 0;
    position.y = 0;
    var tempobj = obj;
    while(tempobj!=null && tempobj!=document.body)
    {
    position.x += tempobj.offsetLeft + tempobj.clientLeft;
    position.y += tempobj.offsetTop + tempobj.clientTop;
    tempobj = tempobj.offsetParent
    }
    return position;
}
</script>
</head>

//网页中引用以上函数的代码

//${seat.perID}等参数是从数据库中取得的。
                        <a href="#" onmouseover="showPopup(460,320,'perID_${index}','${seat.perID}','${seat.pName }','${seat.pPartName }','${seat.pExtension }','${seat.pTnum }','${seat.pEmail }','${path}${seat.pPhotoFile }','${title1 }-${seat.name}');" id='perID_${index}'>
             <font color="blue">${seat.perName }</font></a>
                    </td>

分享到：

给TABLE加边框 | MSSQLSERVER 根据姓名保存姓名的拼音字段

2009-11-02 17:59
浏览 1510
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论