两种情况的splitter

转载于 2008-12-12 15:28:00 发布 · 537 阅读

·

0

·

文章标签：

#border #javascript #url #server #class

本文介绍了两种网页布局的方法：一种是使用表格和iframe实现的单页布局，可通过点击按钮切换左侧导航栏的显示与隐藏；另一种是利用frameset进行多窗口布局，左侧为固定宽度的导航区，中间为箭头切换图标，右侧为主内容区。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一种：所有内容都在一个页面，其中左面导航或操作，右面是展示

<table style="width: 100%; height: 100%;" cellspacing="0" cellpadding="0" border="0">
                <tr>
                    <td style="width: 130px; height: 100%;" align="left" valign="top" class="divbg_1">
                        <div id="divTreeView" style="height: 100%; width: 130px; overflow: hidden;">
                        </div>
                    </td>
                    <td style="width: 9px; background-image: url(images/menu/splitter_bg.gif); vertical-align: middle;">
                        <div id="divLeft" style="width: 9px; height: 79px; background-image: url(images/menu/splitter_l.gif);
                            cursor: hand;" onclick="split(0)" title="隐藏菜单">
                        </div>
                        <div id="divRight" style="display: none; width: 9px; height: 79px; background-image: url(images/menu/splitter_r.gif);
                            cursor: hand;" onclick="split(1)" title="显示菜单">
                        </div>
                    </td>
                    <td style="background-color: White; width: 100%; height: 640px;" valign="top">
                        <iframe id="iframes" name="iframes" style="vertical-align: top;" width="100%" height="100%"
                            scrolling="no" frameborder="0" marginwidth="0" marginheight="0" runat="server"></iframe>
                    </td>
                </tr>
            </table>

function splitter(dirc)
{
   var divTree = this.document.all("divTreeView");
   var divLeft = this.document.all("divLeft");
   var divRight = this.document.all("divRight");
   var divGridView = this.document.all("divGrid");

   if (dirc == 1)
   {
        divTree.style.display = "";
        divLeft.style.display = "";
        divRight.style.display = "none";
        divGridView.style.width = "755";
   }
   else
   {
        divTree.style.display = "none";
        divLeft.style.display = "none";
        divRight.style.display = "";
        divGridView.style.width = "968px";
   }
}

第二种：用frameset，左面导航，右面展示

<frameset id="showframe" cols="200,7,*" frameborder="no" border="0" framespacing="0">
    <frame src="../left/left2.html" name="leftFrame" scrolling="auto" noresize="noresize" id="leftFrame" title="leftFrame" />
    <frame src="../arrow.html" scrolling="No" noresize="noresize"/>
    <frame src="../main/main2.html" name="mainFrame" id="mainFrame" title="mainFrame" />
  </frameset>

arrow.html代码

<body bgcolor="#cbd8f3">
    <table height="100%" width="7" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td>
                <img id="arrow_1" onclick="disframe()" src="images/frame_arrow1.gif" /><img id="arrow_2"
                    onclick="showframe()" style="display: none" src="images/frame_arrow2.gif" />
            </td>
        </tr>
    </table>

    <script language="javascript">
        function disframe() {
            window.parent.showframe.cols = "0,7,*"
            arrow_1.style.display = "none";
            arrow_2.style.display = "";
        }
        function showframe() {
            window.parent.showframe.cols = "200,7,*"
            arrow_1.style.display = "";
            arrow_2.style.display = "none";
        }
    </script>

</body>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。