两种情况的splitter

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

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

 

 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，左面导航，右面展示

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

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