`
baobeituping
  • 浏览: 1070532 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
社区版块
存档分类
最新评论

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

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\">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名："+Name+"</td></tr>"
 +"<tr><td bgcolor=\"#FFFFFF\">座 位 号："+SeatID+"</td></tr>"
 +"<tr><td bgcolor=\"#FFFFFF\">职&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;务："+PartName+"</td></tr>"
 +"<tr><td bgcolor=\"#FFFFFF\">分&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;机："+Extension+"</td></tr>"
 +"<tr><td bgcolor=\"#FFFFFF\">T&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;数："+Tnum+"</td></tr>"
 +"<tr><td bgcolor=\"#FFFFFF\">邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱："+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>

 

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

<td width="70px" align="center">

//${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>

分享到：
| MSSQLSERVER 根据姓名保存姓名的拼音字段
评论
发表评论

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

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics