看到动网论坛帖子列表里在用,就把它挖出来,核心是用浮动框架iframe来显示或隐藏跟帖列表。
共有3个文件和4个图片
在线演示:http://music.lzr.com.cn/apple/test/
打包下载:http://music.lzr.com.cn/apple/file/ExpandCollapse.rar
主页面:Index.htm如下:
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//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-14 15: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-15 13: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-15 13: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-14 15: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-15 13: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-15 13: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" >
//控制列表显示的代码
var parentfollow=parent.document.getElementById("follow356")
var parentfollowTd=parent.document.getElementById("followTd356")
var parentfollowImg=parent.document.getElementById("followImg356")
if(parentfollow)
{
parentfollow.style.display="";
}
parentfollowTd.style.display="";
parentfollowImg.innerHTML='<a href="Close.htm" target="hiddenframe" title="关闭帖子列表" ><img src="nofollow.gif" border="0" ></a>';
parentfollowTd.innerHTML='<div style="width:240px;margin-left:18px;border:1px solid black;background-color:lightyellow;color:black;padding:2px">正在读取关于本主题的跟贴,请稍侯……</div>'
//分页代码,参数:页码,记录总数,每页显示数,页数
function showpage(page,RecordCount,PageSize,PageCount)
{
var Tmpstr='<div align=left style="width:100%;height:20;"> 页次:'+page+' / '+PageCount+'页 每页最多'+PageSize+'个 共 '+RecordCount+' 个 分页:'
if (page=='1')
{
Tmpstr+='<font face=webdings color="#FF0000">9</font>';
}else{
Tmpstr+='<a href="loadtree1.asp?boardid=13&rootid=356&action=1&star=1" title="第一页" target="hiddenframe"><font face=webdings>9</font></a>';
}
var p;
if ((page-1)%10==0)
{
p=(page-1) /10
}
else
{
p=(((page-1)-(page-1)%10)/10)
}
if (p*10 > 0)
{
Tmpstr+='<a href="loadtree1.asp?boardid=13&rootid=356&action=1&star='+p*10+'" title="上十页" target="hiddenframe" ><font face=webdings>7</font></a> ';
}
Tmpstr+='<b>';
for (var i=p*10+1;i<p*10+11;i++)
{
if (i==page)
{
Tmpstr+=' <font color="#FF0000">'+i+'</font> ';
}
else
{
Tmpstr+=' <a href="loadtree1.asp?boardid=13&rootid=356&action=1&star='+i+'" target="hiddenframe">'+i+'</a> ';
}
if (i==PageCount) break;
}
Tmpstr+='</b>';
if (i<PageCount)
{
Tmpstr+='<a href="loadtree1.asp?boardid=13&rootid=356&action=1&star='+i+'" title="下十页" target="hiddenframe"><font face=webdings>8</font></a> ';
}
if (page==PageCount)
{
Tmpstr+='<Font face=webdings color="#FF0000">:</font>';
}
else
{
Tmpstr+='<a href="loadtree1.asp?boardid=13&rootid=356&action=1&star='+PageCount+'" title="最尾页" target="hiddenframe"><font face=webdings>:</font></a> ';
}
Tmpstr+='</div>';
return(Tmpstr)
}
</ script >
< Script Language =JavaScript >
var tmpstr='';tmpstr='<!--展开帖子列表,分割成几个部分--><div align=left style="width:100%;height:20"> <img src="nofollow.gif"><a href="#" title="">把你的完整代码贴出来吧? 第8行是指哪</a> -- <a href="#">Dicky</a></div><div align=left style="width:100%;height:20"> <img src="nofollow.gif"><a href="#" title="">http://www.webjx.com/htmldata/2005-</a> -- <a href="#">ASP学习者</a></div><div align=left style="width:100%;height:20"> <img src="nofollow.gif"><a href="#" title="">下次把具体错误和相关代码贴出来啊~~</a> -- <a href="#">Dicky</a></div>';
tmpstr+=showpage(1,3,10,1);
parent.document.getElementById("followTd356").innerHTML=tmpstr;
</ Script >
</ body >
</ html >
跟帖关闭调用页面Close.htm代码如下:
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" >
</ head >
< body >
< script language ="javascript" >
//控制列表显示的代码
var parentfollow=parent.document.getElementById("follow356")
var parentfollowTd=parent.document.getElementById("followTd356")
var parentfollowImg=parent.document.getElementById("followImg356")
if(parentfollow)
{
parentfollow.style.display="";
}
parentfollowTd.style.display="";
parentfollowImg.innerHTML='<a href="Close.htm" target="hiddenframe" title="关闭帖子列表" ><img src="nofollow.gif" border="0" ></a>';
parentfollowTd.innerHTML='<div style="width:240px;margin-left:18px;border:1px solid black;background-color:lightyellow;color:black;padding:2px">正在读取关于本主题的跟贴,请稍侯……</div>'
//分页代码,参数:页码,记录总数,每页显示数,页数
function showpage(page,RecordCount,PageSize,PageCount)
{
var Tmpstr='<div align=left style="width:100%;height:20;"> 页次:'+page+' / '+PageCount+'页 每页最多'+PageSize+'个 共 '+RecordCount+' 个 分页:'
if (page=='1')
{
Tmpstr+='<font face=webdings color="#FF0000">9</font>';
}else{
Tmpstr+='<a href="loadtree1.asp?boardid=13&rootid=356&action=1&star=1" title="第一页" target="hiddenframe"><font face=webdings>9</font></a>';
}
var p;
if ((page-1)%10==0)
{
p=(page-1) /10
}
else
{
p=(((page-1)-(page-1)%10)/10)
}
if (p*10 > 0)
{
Tmpstr+='<a href="loadtree1.asp?boardid=13&rootid=356&action=1&star='+p*10+'" title="上十页" target="hiddenframe" ><font face=webdings>7</font></a> ';
}
Tmpstr+='<b>';
for (var i=p*10+1;i<p*10+11;i++)
{
if (i==page)
{
Tmpstr+=' <font color="#FF0000">'+i+'</font> ';
}
else
{
Tmpstr+=' <a href="loadtree1.asp?boardid=13&rootid=356&action=1&star='+i+'" target="hiddenframe">'+i+'</a> ';
}
if (i==PageCount) break;
}
Tmpstr+='</b>';
if (i<PageCount)
{
Tmpstr+='<a href="loadtree1.asp?boardid=13&rootid=356&action=1&star='+i+'" title="下十页" target="hiddenframe"><font face=webdings>8</font></a> ';
}
if (page==PageCount)
{
Tmpstr+='<Font face=webdings color="#FF0000">:</font>';
}
else
{
Tmpstr+='<a href="loadtree1.asp?boardid=13&rootid=356&action=1&star='+PageCount+'" title="最尾页" target="hiddenframe"><font face=webdings>:</font></a> ';
}
Tmpstr+='</div>';
return(Tmpstr)
}
</ script >
< Script Language =JavaScript >
var tmpstr='';tmpstr='<!--展开帖子列表,分割成几个部分--><div align=left style="width:100%;height:20"> <img src="nofollow.gif"><a href="#" title="">把你的完整代码贴出来吧? 第8行是指哪</a> -- <a href="#">Dicky</a></div><div align=left style="width:100%;height:20"> <img src="nofollow.gif"><a href="#" title="">http://www.webjx.com/htmldata/2005-</a> -- <a href="#">ASP学习者</a></div><div align=left style="width:100%;height:20"> <img src="nofollow.gif"><a href="#" title="">下次把具体错误和相关代码贴出来啊~~</a> -- <a href="#">Dicky</a></div>';
tmpstr+=showpage(1,3,10,1);
parent.document.getElementById("followTd356").innerHTML=tmpstr;
</ Script >
</ body >
</ html >
<
html
>
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" >
</ head >
< body >
< script language ="javascript" >
//控制列表关闭的代码
var parentfollow=parent.document.getElementById("follow356")
var parentfollowTd=parent.document.getElementById("followTd356")
var parentfollowImg=parent.document.getElementById("followImg356")
if(parentfollow)
{
parentfollow.style.display="none";
}
parentfollowTd.style.display="none";
parentfollowImg.innerHTML='<a href="Open.htm" target="hiddenframe" title="展开帖子列表" ><img src="plus.gif" border="0" ></a>';
</ script >
</ body >
</ html >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" >
</ head >
< body >
< script language ="javascript" >
//控制列表关闭的代码
var parentfollow=parent.document.getElementById("follow356")
var parentfollowTd=parent.document.getElementById("followTd356")
var parentfollowImg=parent.document.getElementById("followImg356")
if(parentfollow)
{
parentfollow.style.display="none";
}
parentfollowTd.style.display="none";
parentfollowImg.innerHTML='<a href="Open.htm" target="hiddenframe" title="展开帖子列表" ><img src="plus.gif" border="0" ></a>';
</ script >
</ body >
</ html >