看到动网论坛帖子列表里在用,就把它挖出来,核心是用浮动框架iframe来显示或隐藏跟帖列表。
共有3个文件和4个图片
在线演示:http://music.lzr.com.cn/apple/test/
打包下载:http://music.lzr.com.cn/apple/file/ExpandCollapse.rar
主页面:Index.htm如下:
<!
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html >
< head >
< title > 论坛帖子跟帖展开/关闭测试 </ title >
< meta name ="Generator" content ="EditPlus" />
< meta name ="Author" content ="" />
< meta name ="Keywords" content ="" />
< meta name ="Description" content ="" />
<!-- 青青河草-2004- -->
< style type ="text/css" >
A:link,A:active,A:visited{}{TEXT-DECORATION:none;Color:#000000}
A:hover{}{TEXT-DECORATION:underline;Color:#4455aa}
BODY{}{
FONT-SIZE:12px;
COLOR:#000000;
FONT-FAMILY:宋体;
background-color:#FFFFFF;
scrollbar-face-color:#dbeedd;
scrollbar-highlight-color:#FFFFFF;
scrollbar-shadow-color:darkseagreen;
scrollbar-3dlight-color:#dbeedd;
scrollbar-arrow-color:darkseagreen;
scrollbar-track-color:#f3faf4;
scrollbar-darkshadow-color:#f3faf4;
background-image:url(lvbgcolor.gif);
text-align:center;margin:0;
}
font{}{line-height:normal;}
TD{}{
font-family:宋体;
font-size:12px;
line-height:15px;
}
th
{}{
background-color:#a9d46d;
background-image:url(h3.gif);
COLOR:#FFFFFF;
font-size:12px;
font-weight:bold;
height:25;
}
td.tablebody1{}{background-color:#f4faed;}
td.tablebody2{}{background-color:#e3f1d1;}
.tableborder1{}{width:88%;border:1px;background-color:#a9d46d;}
</ style >
</ head >
< body >
< b > 动网论坛帖子跟帖展开/关闭测试 </ b >
< iframe width ="0" height ="0" src ="" name ="hiddenframe" ></ iframe >
< table cellPadding ="1" cellSpacing ="1" class ="tableborder1" align ="center" >
< form action ="" method ="post" name ="batch" >
< tr >
< th width ="*" > 主题(点 < img src ="plus.gif" > 即可展开贴子列表) </ th >
< th width ="80" > 作者 </ th >
< th width ="40" > 回复 </ th >
< th width ="40" > 人气 </ th >
< th width ="195" > 最后更新 </ th >
</ tr >
< tr >
< td align ="left" class ="tablebody1" >< span style ="float:right" ></ span >< span id ="followImg356" >< a href ="Open.htm" target ="hiddenframe" title ="展开帖子列表" >< img src ="plus.gif" border ="0" align ="absmiddle" ></ a ></ span > < a href ="#" title ="《帮帮忙?刚学ASP就遇到好多问题哦!》
作者:ASP学习者
发表于:2005-9-1415:57:00
最后发贴:把你的完整代码" > 帮帮忙?刚学ASP就遇到好多问题哦! </ a ></ td >
< td class ="tablebody2" align ="center" > ASP学习者 </ td >
< td class ="tablebody1" align ="center" > 3 </ td >
< td class ="tablebody1" align ="center" > 9 </ td >
< td align ="left" class ="tablebody2" nowrap > < span style ="width:110px;" > 2005-9-1513:34:43 </ span > < font color ="#FF0000" > | </ font > Dicky </ td >
</ tr >
< tr id ="follow356" style ="display:none;" >< td id ="followTd356" class ="tablebody1" colspan ="7" ></ td ></ tr >
< tr >
< td align ="left" class ="tablebody1" > adffasd </ td >
< td class ="tablebody2" align ="center" > dafsafsd </ td >
< td class ="tablebody1" align ="center" > 2 </ td >
< td class ="tablebody1" align ="center" > 11 </ td >
< td align ="left" class ="tablebody2" nowrap > < span style ="width:110px;" > 2005-1-1513:34:43 </ span > < font color ="#FF0000" > | </ font > Dicky </ td >
</ tr >
</ form ></ table >
</ body >
</ html >
跟帖打开调用的页面Open.htm,代码如下:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html >
< head >
< title > 论坛帖子跟帖展开/关闭测试 </ title >
< meta name ="Generator" content ="EditPlus" />
< meta name ="Author" content ="" />
< meta name ="Keywords" content ="" />
< meta name ="Description" content ="" />
<!-- 青青河草-2004- -->
< style type ="text/css" >
A:link,A:active,A:visited{}{TEXT-DECORATION:none;Color:#000000}
A:hover{}{TEXT-DECORATION:underline;Color:#4455aa}
BODY{}{
FONT-SIZE:12px;
COLOR:#000000;
FONT-FAMILY:宋体;
background-color:#FFFFFF;
scrollbar-face-color:#dbeedd;
scrollbar-highlight-color:#FFFFFF;
scrollbar-shadow-color:darkseagreen;
scrollbar-3dlight-color:#dbeedd;
scrollbar-arrow-color:darkseagreen;
scrollbar-track-color:#f3faf4;
scrollbar-darkshadow-color:#f3faf4;
background-image:url(lvbgcolor.gif);
text-align:center;margin:0;
}
font{}{line-height:normal;}
TD{}{
font-family:宋体;
font-size:12px;
line-height:15px;
}
th
{}{
background-color:#a9d46d;
background-image:url(h3.gif);
COLOR:#FFFFFF;
font-size:12px;
font-weight:bold;
height:25;
}
td.tablebody1{}{background-color:#f4faed;}
td.tablebody2{}{background-color:#e3f1d1;}
.tableborder1{}{width:88%;border:1px;background-color:#a9d46d;}
</ style >
</ head >
< body >
< b > 动网论坛帖子跟帖展开/关闭测试 </ b >
< iframe width ="0" height ="0" src ="" name ="hiddenframe" ></ iframe >
< table cellPadding ="1" cellSpacing ="1" class ="tableborder1" align ="center" >
< form action ="" method ="post" name ="batch" >
< tr >
< th width ="*" > 主题(点 < img src ="plus.gif" > 即可展开贴子列表) </ th >
< th width ="80" > 作者 </ th >
< th width ="40" > 回复 </ th >
< th width ="40" > 人气 </ th >
< th width ="195" > 最后更新 </ th >
</ tr >
< tr >
< td align ="left" class ="tablebody1" >< span style ="float:right" ></ span >< span id ="followImg356" >< a href ="Open.htm" target ="hiddenframe" title ="展开帖子列表" >< img src ="plus.gif" border ="0" align ="absmiddle" ></ a ></ span > < a href ="#" title ="《帮帮忙?刚学ASP就遇到好多问题哦!》
作者:ASP学习者
发表于:2005-9-1415:57:00
最后发贴:把你的完整代码" > 帮帮忙?刚学ASP就遇到好多问题哦! </ a ></ td >
< td class ="tablebody2" align ="center" > ASP学习者 </ td >
< td class ="tablebody1" align ="center" > 3 </ td >
< td class ="tablebody1" align ="center" > 9 </ td >
< td align ="left" class ="tablebody2" nowrap > < span style ="width:110px;" > 2005-9-1513:34:43 </ span > < font color ="#FF0000" > | </ font > Dicky </ td >
</ tr >
< tr id ="follow356" style ="display:none;" >< td id ="followTd356" class ="tablebody1" colspan ="7" ></ td ></ tr >
< tr >
< td align ="left" class ="tablebody1" > adffasd </ td >
< td class ="tablebody2" align ="center" > dafsafsd </ td >
< td class ="tablebody1" align ="center" > 2 </ td >
< td class ="tablebody1" align ="center" > 11 </ td >
< td align ="left" class ="tablebody2" nowrap > < span style ="width:110px;" > 2005-1-1513:34:43 </ span > < font color ="#FF0000" > | </ font > Dicky </ td >
</ tr >
</ form ></ table >
</ body >
</ html >
<
html
>
< head >
< meta http-equiv ="Content-Type" content ="text/html;charset=gb2312" >
</ head >
< body >
< script language ="javascript" >
//控制列表显示的代码
varparentfollow=parent.document.getElementById("follow356")
varparentfollowTd=parent.document.getElementById("followTd356")
varparentfollowImg=parent.document.getElementById("followImg356")
if(parentfollow)
{
parentfollow.style.display="";
}
parentfollowTd.style.display="";
parentfollowImg.innerHTML='<ahref="Close.htm"target="hiddenframe"title="关闭帖子列表"><imgsrc="nofollow.gif"border="0"></a>';
parentfollowTd.innerHTML='<divstyle="width:240px;margin-left:18px;border:1pxsolidblack;background-color:lightyellow;color:black;padding:2px">正在读取关于本主题的跟贴,请稍侯……</div>'
//分页代码,参数:页码,记录总数,每页显示数,页数
functionshowpage(page,RecordCount,PageSize,PageCount)
{
varTmpstr='<divalign=leftstyle="width:100%;height:20;"> 页次:'+page+'/'+PageCount+'页每页最多'+PageSize+'个共'+RecordCount+'个分页:'
if(page=='1')
{
Tmpstr+='<fontface=webdingscolor="#FF0000">9</font>';
}else{
Tmpstr+='<ahref="loadtree1.asp?boardid=13&rootid=356&action=1&star=1"title="第一页"target="hiddenframe"><fontface=webdings>9</font></a>';
}
varp;
if((page-1)%10
< head >
< meta http-equiv ="Content-Type" content ="text/html;charset=gb2312" >
</ head >
< body >
< script language ="javascript" >
//控制列表显示的代码
varparentfollow=parent.document.getElementById("follow356")
varparentfollowTd=parent.document.getElementById("followTd356")
varparentfollowImg=parent.document.getElementById("followImg356")
if(parentfollow)
{
parentfollow.style.display="";
}
parentfollowTd.style.display="";
parentfollowImg.innerHTML='<ahref="Close.htm"target="hiddenframe"title="关闭帖子列表"><imgsrc="nofollow.gif"border="0"></a>';
parentfollowTd.innerHTML='<divstyle="width:240px;margin-left:18px;border:1pxsolidblack;background-color:lightyellow;color:black;padding:2px">正在读取关于本主题的跟贴,请稍侯……</div>'
//分页代码,参数:页码,记录总数,每页显示数,页数
functionshowpage(page,RecordCount,PageSize,PageCount)
{
varTmpstr='<divalign=leftstyle="width:100%;height:20;"> 页次:'+page+'/'+PageCount+'页每页最多'+PageSize+'个共'+RecordCount+'个分页:'
if(page=='1')
{
Tmpstr+='<fontface=webdingscolor="#FF0000">9</font>';
}else{
Tmpstr+='<ahref="loadtree1.asp?boardid=13&rootid=356&action=1&star=1"title="第一页"target="hiddenframe"><fontface=webdings>9</font></a>';
}
varp;
if((page-1)%10