动网论坛帖子跟帖展开/关闭测试

zoukankan html css js c++ java

动网论坛帖子跟帖展开/关闭测试

看到动网论坛帖子列表里在用，就把它挖出来，核心是用浮动框架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="" />
        
        <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="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="110px;">2005-1-15 13:34:43</span> <font color="#FF0000">|</font> Dicky</td>
        </tr>
        </form></table>
    </body>
</html>
跟帖打开调用的页面Open.htm，代码如下：

<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="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="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="100%;height:20">　<img src="nofollow.gif"><a href="#" title="">把你的完整代码贴出来吧？第8行是指哪</a> -- <a href="#">Dicky</a></div><div align=left style="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="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代码如下：

<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>

青苹果Web应用商店 https://webapp.taobao.com/

PHP/ASP.NET/ASP/UCHOME/DISCUZ! X系列网站开发，详细需求联系QQ:8511978

查看全文

相关阅读:
1、PHP入门二维数组与循环
 Nginx 配置反向代理后，页面中取绝对URL地址的问题显示代理端口
 苹果手机上点击WEUI日期控件不容易点中
 ios 不支持-,-时间。
Newtonsoft.Json添加项
 Baidu地图Map api直接加https不起作用
 腾讯云cos封装
 linux连接工具隧道模式
 微信调试工具测试时有时候复制URL没有corpid解决
 WEUI控件JS用法

原文地址：https://www.cnblogs.com/Dicky/p/262285.html