导航
  • 主页
会员中心
收藏
消息
创作中心

点出链接出现菜单（100分）

rcsglydm 2009-08-17 11:21:06
暂时没这多分，明天把分加满100分。
在做一个ASP程序，要求实现以下效果。表中列出员工姓名和单位名称。
1、点击员工姓名，在姓名的右下方出现一个方形框（实的虚的都行），上面显示他的年龄、性别、工作时间等。
2、点击单位名称，在名称的右下角出现一个方形框（实的虚的都行），上面显示A接洽单，B介绍信。点击介绍信，就会打开介绍信的页面，页面里动态显示出了单位名称，其他都是固定格式。
有些难度，谁能解决。
...全文
161 点赞 收藏 14
写回复
14 条回复
切换为时间正序
请发表友善的回复…
发表回复
never exists 2009-08-21
原先弄的 跟你差不多吧
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<table width="729" border="0" cellspacing="0" cellpadding="0" style="border-bottom:1px solid #fff;">
<tr>
<td width="38" align="right" valign="middle" style="padding:10px 0px;"></td>
<td width="671" align="left" valign="top" bgcolor="#ECECEC" style="padding:10px;"><table width="669" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="223" align="left" valign="top"><TABLE id=tablemdsin cellSpacing=0 cellPadding=0 width=800 border=0>
<TBODY>
<tr>
<td align="left"><div id="top99909640"><a onmouseover="showMenuDIv( 99909640 )"
onmouseout="hiddenMenuDIv( 99909640 )"
href="#" class="cpmc">员工姓名</a></div></td>

</tr>

</table></td>

</tr>

<tr>
<td width="223" align="left" valign="top"><TABLE id=tablemdsin cellSpacing=0 cellPadding=0 width=800 border=0>
<TBODY>
<tr>
<td align="left"> </td>
</tr>

</table></td>

</tr>


<tr>
<td width="223" align="left" valign="top"><TABLE id=tablemdsin cellSpacing=0 cellPadding=0 width=800 border=0>
<TBODY>
<tr>
<td align="left"><div id="top99909641"><a onmouseover="showMenuDIv( 99909641 )"
onmouseout="hiddenMenuDIv( 99909641 )"
href="#" class="cpmc">单位名称</a></div></td>
</tr>

</table></td>

</tr>

</TBODY></TABLE></td>
</tr>
</table>


<STYLE type=text/css media=screen>.Vote {
MARGIN: 0px; WIDTH: 810px; PADDING-TOP: 0px; FONT-FAMILY: ARIAL; BACKGROUND-COLOR: #fdfffd; TEXT-ALIGN: center
}
.content {
MARGIN: 0px auto; WIDTH: 810px; POSITION: relative; TEXT-ALIGN: center
}
.TableTop {
FONT-SIZE: 12px; PADDING-BOTTOM: 3px; COLOR: #ffffff; HEIGHT: 18px; BACKGROUND-COLOR: green; TEXT-ALIGN: left
}
.tdbg-left {
BACKGROUND-POSITION: left top; FLOAT: left; BACKGROUND-IMAGE: url(http://www.ehsy.com/images/az-home_22.gif); WIDTH: 7px; BACKGROUND-REPEAT: no-repeat; HEIGHT: 7px
}
.tdbg-right {
BACKGROUND-POSITION: right top; FLOAT: right; BACKGROUND-IMAGE: url(http://www.ehsy.com/images/az-home_25.gif); WIDTH: 7px; BACKGROUND-REPEAT: no-repeat; HEIGHT: 7px
}
.toptext {
PADDING-RIGHT: 0px; PADDING-LEFT: 5px; FLOAT: left; PADDING-BOTTOM: 0px; WIDTH: 150px; PADDING-TOP: 5px; TEXT-ALIGN: left
}
.toptdbg-right {
BACKGROUND-POSITION: right top; FLOAT: right; BACKGROUND-IMAGE: url(http://www.ehsy.com/images/az-tdbg-right.gif); WIDTH: 7px; BACKGROUND-REPEAT: no-repeat; HEIGHT: 7px
}
.VoteTable {
BORDER-RIGHT: #5c9ec0 1px solid; PADDING-RIGHT: 0px; PADDING-LEFT: 5px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: #5c9ec0 1px solid; WIDTH: 810px; PADDING-TOP: 10px; BORDER-BOTTOM: #5c9ec0 1px solid
}
DIV {
WORD-BREAK: break-all; WHITE-SPACE: normal
}
</STYLE>

<SCRIPT type=text/javascript>
function getTop(e)
{
var offset=e.offsetTop;
if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
return offset;

}
function showMenuDIv(div)
{
var x = getTop(document.getElementById("top"+div));
var y = getTdLeft();
document.getElementById(div).style.top = x + 14+ "px";
document.getElementById(div).style.left = y + "px";
document.getElementById(div).style.display = "";
}
function hiddenMenuDIv(div)
{
document.getElementById(div).style.display = "none";
}
function hiddenMenuDIv2(ele)
{
setTimeout("ele.style.display= none ",2000);
}
function getTdLeft()
{
var obj = document.getElementById("tablemdsin").rows[0].cells[0];
var oRect = obj.getBoundingClientRect();
var x = oRect.left;
return x-19;
}
</SCRIPT>

<DIV class=Vote id=99909640 onMouseOver="showMenuDIv( 99909640 )"
style="DISPLAY: none; POSITION: absolute"
onmouseout="hiddenMenuDIv( 99909640 )">
<DIV class=content>

<DIV class=VoteTable>
<TABLE width="100%">
<TBODY>
<TR>
<TD>1.年龄</TD>
<TD>2.性别</TD>
<TD>3.工作时间</TD>
</TR>
</TBODY></TABLE></DIV></DIV></DIV>


<DIV class=Vote id=99909641 onMouseOver="showMenuDIv( 99909641 )"
style="DISPLAY: none; POSITION: absolute"
onmouseout="hiddenMenuDIv( 99909641 )">
<DIV class=content>

<DIV class=VoteTable>
<TABLE width="100%">
<TBODY>
<TR>
<TD><A href="a.html">A接洽单</A></TD>
<TD><A href="b.html">B介绍信</A></TD>

</TBODY></TABLE></DIV></DIV></DIV>


</body>
</html>
 回复 赞
loveinet_168 2009-08-21
DIV+CSS+js都可以实现在，网上都可以找到很多相同效果的代码。。
 回复 赞
rcsglydm 2009-08-20
谢谢,我先试试.
 回复 赞
凡夫与俗子 2009-08-19
没事，试试先，也是一个提高的过程
 回复 赞
床上等您 2009-08-19
显示信息就好简单，用ajax就可以实现，至于在某个字段上显示就要用到页面控制啊，控制才是难点啊。
 回复 赞
hongmaohouzi 2009-08-19
<script language="javascript">
var docEle = function() {
return document.getElementById(arguments[0]) || false;
}
function openNewDiv(_id) {
var m = "mask";
if (docEle(_id)) document.removeChild(docEle(_id));
if (docEle(m)) document.removeChild(docEle(m));
// 新激活图层
var newDiv = document.createElement("div");
newDiv.id = _id;
newDiv.style.position = "absolute";
newDiv.style.zIndex = "9999";
newDiv.style.width = "500px";
newDiv.style.height = "300px";
newDiv.style.top = "50px";
//newDiv.style.left = (parseInt(document.body.scrollWidth) - 300) / 2 + "px"; // 屏幕居中
newDiv.style.background = "#EFEFEF";
newDiv.style.border = "1px solid #860001";
newDiv.style.padding = "5px";
newDiv.innerHTML = "新激活图层内容    ";
document.body.appendChild(newDiv);
// mask图层
var newMask = document.createElement("div");
newMask.id = m;
newMask.style.position = "absolute";
newMask.style.zIndex = "1";
newMask.style.width = document.body.scrollWidth + "px";
newMask.style.height = document.body.scrollHeight + "px";
newMask.style.top = "0px";
newMask.style.left = "0px";
//newMask.style.background = "#000";
newMask.style.filter = "alpha(opacity=40)";
newMask.style.opacity = "0.40";
document.body.appendChild(newMask);

// 关闭mask和新图层
var newA = document.createElement("a");
newA.href = "#";
newA.innerHTML = "关闭";
newA.onclick = function() {
document.body.removeChild(docEle(_id));
document.body.removeChild(docEle(m));
return false;
}
newDiv.appendChild(newA);
}
</script>

<body>
<a href="#" onclick="openNewDiv('newDiv');return false;">激活新层</a>
<p>网页内容网页内容网页内容</p>
<p>网页内容网页内容网页内容</p>
</body>
回复 赞
黑心 2009-08-19
<head>

<script   language="javascript">   

   document.onclick = popUp

   function   popUp(){

   if (document.all.g1.value==2)

   {document.all.d1.style.visibility='hidden';}

   document.all.g1.value=2;

   }

  function   sh(divid,viz,valuex){ 

  document.all.d1.style.pixelLeft=event.x;   

  document.all.d1.style.pixelTop=event.y; 

  document.all.d1.style.display='block';   

  document.all.d1.style.visibility=viz;   

  document.all.s1.value=valuex;

  }   

  </script>

</head>

<body oncontextmenu='popUp();' ondragstart='popUp();' onselectstart='popUp();'>

 <table border='0' cellspacing='1' cellpadding='3' bgcolor='#dddddd'><tr bgcolor='#FFFFFF' onmouseover=javascript:this.bgColor='#F9F8F2' onmouseout=javascript:this.bgColor='#ffffff'><td width="65%" height="28"><a href='javascript:' onClick="sh('d1','visible','1');document.all.g1.value=1;" ><font color=black>张三</font></a>     </td></tr><tr bgcolor='#FFFFFF' onmouseover=javascript:this.bgColor='#F9F8F2' onmouseout=javascript:this.bgColor='#ffffff'><td height="28"><a href='javascript:' onClick="sh('d1','visible','2');document.all.g1.value=1;" ><font color=black>李四</font></a>    </td></tr><tr bgcolor='#FFFFFF' onmouseover=javascript:this.bgColor='#F9F8F2' onmouseout=javascript:this.bgColor='#ffffff'><td height="28"><a href='javascript:' onClick="sh('d1','visible','3');document.all.g1.value=1;" ><font color=black>王五</font></a>  </td></tr></table> 

<div   id=d1  style='BORDER-RIGHT:   #333333   1px   solid;   BORDER-TOP:   #333333   1px   solid;   DISPLAY:   none;   Z-INDEX:   102;   BORDER-LEFT:   #333333   1px   solid;   WIDTH:   100px;   BORDER-BOTTOM:   #333333   1px   solid;   POSITION:   absolute;   HEIGHT:   60px;   BACKGROUND-COLOR:   #eeeeee'   onclick='event.cancelBubble=true;'  >

  <table  style="cursor:hand" >

    <tr onmouseover=javascript:this.bgColor='#333333' onmouseout=javascript:this.bgColor='#eeeeee'>

      <td><input id="g1" type="hidden">

        <input id="s1" type="hidden">

        <input onClick="document.all.d1.style.visibility=='hidden';openwin(410,300,'info.asp?A_Id='+document.all.s1.value)"  value="查看详细信息" type="button" style='BORDER-RIGHT:   #eeeeee   1px   solid;   BORDER-TOP:   #eeeeee   1px   solid;   Z-INDEX:   102;   BORDER-LEFT:   #eeeeee   1px   solid;   WIDTH:   100px;   BORDER-BOTTOM:   #eeeeee   1px   solid;   POSITION:inherit;   HEIGHT:   18px;   BACKGROUND-COLOR:   #eeeeee' >

      </td>

    </tr>

    <tr onmouseover=javascript:this.bgColor='#333333' onmouseout=javascript:this.bgColor='#eeeeee'>

      <td><input onClick="location.href='Add1.asp?A_Id='+document.all.s1.value"  value="发送电子邮件" type="button" style='BORDER-RIGHT:   #eeeeee   1px   solid;   BORDER-TOP:   #eeeeee   1px   solid;   Z-INDEX:   102;   BORDER-LEFT:   #eeeeee   1px   solid;   WIDTH:   100px;   BORDER-BOTTOM:   #eeeeee   1px   solid;   POSITION:inherit;   HEIGHT:   18px;   BACKGROUND-COLOR:   #eeeeee'></td>

    </tr>

    <tr onmouseover=javascript:this.bgColor='#333333' onmouseout=javascript:this.bgColor='#eeeeee'>

      <td><input onClick="location.href='Add3.asp?A_Id='+document.all.s1.value"  value="发送站内短信" type="button" style='BORDER-RIGHT:   #eeeeee   1px   solid;   BORDER-TOP:   #eeeeee   1px   solid;   Z-INDEX:   102;   BORDER-LEFT:   #eeeeee   1px   solid;   WIDTH:   100px;   BORDER-BOTTOM:   #eeeeee   1px   solid;   POSITION:inherit;   HEIGHT:   18px;   BACKGROUND-COLOR:   #eeeeee'></td>

    </tr>

    <tr onmouseover=javascript:this.bgColor='#333333' onmouseout=javascript:this.bgColor='#eeeeee'>

      <td><input   onClick="location.href='Add4.asp?A_Id='+document.all.s1.value"  value="发送手机短信" type="button" style='BORDER-RIGHT:   #eeeeee   1px   solid;   BORDER-TOP:   #eeeeee   1px   solid;   Z-INDEX:   102;   BORDER-LEFT:   #eeeeee   1px   solid;   WIDTH:   100px;   BORDER-BOTTOM:   #eeeeee   1px   solid;   POSITION:inherit;   HEIGHT:   18px;   BACKGROUND-COLOR:   #eeeeee'></td>

    </tr>

  </table>

</div>

</body>
 回复 赞
黑心 2009-08-19
直接DIV就可以解决。
 回复 赞
rcsglydm 2009-08-19
我现在用的就是弹出新窗口，是父子传值方式。可是客户非要上述效果，郁闷。。。。。。
 回复 赞
shaomingmark 2009-08-18
其实有另外一种思路去解决。不用ajax 也不用Div

你直接用传值的方式单击的时候直接弹出一个新窗口，在新窗口中显示你的内容也可以的
 回复 赞
rcsglydm 2009-08-18
难啊，难。看来我问的都是ASP解决不了的问题。
 回复 赞
suano 2009-08-17
显示的话用div隐藏之类的方法，但是数据传入还是要用到AJAX
 回复 赞
mailbao 2009-08-17
div隱藏或顯示可以實現
如果你會用DW,直接在裏面生成這種特效.

或者直接參考這段JS代碼

--------------------------------


function switchSysBar()

{

    





 if (document.getElementById("img_1").title=="隐藏功能区域")

 

 {

 document.getElementById("img_1").title="展开功能区域"

 document.all("frmTitle").style.display="none";

 document.getElementById("img_1").src="../images/1-2.gif";

 }

 else

 {

 document.getElementById("img_1").title="隐藏功能区域"

 document.all("frmTitle").style.display="";

 document.getElementById("img_1").src="../images/1-1.gif";

 }

 

}
回复 赞
街头小贩 2009-08-17
用ajax好了！看看哪些电影网站都有类4你的需求
 回复 赞
发动态
发帖子
ASP
创建于2007-09-28

2.8w+

社区成员

35.7w+

社区内容

ASP即Active Server Pages，是Microsoft公司开发的服务器端脚本环境。
申请成为版主
社区公告
暂无公告