框架页面的实现及Javascript的改变页面显示和隐藏

访问水木清华 或者南大BBS 可以见到框架页面的应用和JavaScript的切换页面。现在这里演示一个，完全基于Html的。

0 建立文件夹InterFace。下面的html文件放置在文件夹下。

1 建立框架页面MainFrame.html

< html >
< head >
     < title > 系统主框架 </ title >
</ head >
     < frameset  name" =mainframe"  id ="mainframe"  rows ="80,*"  border ="0"  bordercolor ="#999999" >
     < frame  src ="../InterFace/Top.html"  name ="top"  scrolling ="no"  bordercolor ="#999999"  border ="0"   >
    
         < frameset  name ="leftframe"   id="leftframe" cols ="200,10,*" >       
         < frame  src ="../InterFace/Left.html"  name ="left"  scrolling ="auto"  bordercolor ="#999999"  border ="0" >
         < frame  src ="../InterFace/Change.html"  name ="change"  scrolling ="no"  noresize ="true"  marginwidth ="0"  marginheight ="0" >
   
             < frameset  name ="rightframe"  rows ="*,30" >
             < frame  src ="../InterFace/Right.html"  name ="right"  scrolling ="auto"  bordercolor ="#999999"  border ="0" >    
                 < frame  src ="../InterFace/Foot.html"  name ="foot"  scrolling ="no" >
               </ frameset >
           </ frameset >
     </ frameset >
</ html >

 

2 Top.html：一般用来显示公司图标和共用操作

< html >
< head >
     < title > 用户信息 </ title >
</ head >
< body >
Top
</ body >
</ html >

 

3 Left.html：左边的一般用来显示系统有那些功能，通过点击在右边出现对应页面。

< html >
< head  runat ="server" >
     < title > 功能列表 </ title >
</ head >
< body >
Left
</ body >
</ html >

 

4 Change.html：改变窗口大小用，主要是修改左边页面显示或不显。用到的js大家可以修改。我这个是水木清华原版的。可以修改数字。

< html >
< head >
< style  type ="text/css" > ...
.o1 {...}{background-color:#718BD6; font-size:10px; color:#ffffff; text-decoration:none;}
body {...}{margin: 0px; background-color: #F6F6F6; }
</ style >
< script  language ="javascript" > ...
<!--
var iniCols, noCols, o_mf, o_ms, s;
function ini() ...{
    o_mf = parent.document.getElementById("leftframe");
    o_ms = document.getElementById("menuSwitch");
    noCols = iniCols = o_mf.cols;
    if ((pos = noCols.indexOf(",")) != -1) ...{
        noCols = "0" + noCols.substring(pos);
    }    
    s = false;
}
function changeLeft()...{
    s = !s;
    o_mf.cols = s ? noCols : iniCols;
    o_ms.innerHTML = s ? "&#9658;" : "&#9668;";
}
//-->
</ script >
</ head >
< body  onload ="ini()" >
< table  width =100%  height =100%  border =0  cellpadding =0  cellspacing =0 >< tr >< td >
< a  href ="javascript:changeLeft();"  class ="o1"  id ="menuSwitch" > &#9668; </ a >
</ td ></ tr ></ table >
</ body ></ html >

 

5 Right.html：往往对应系统的实际操作。

< html >
< head >
     < title > 默认功能 </ title >
</ head >
< body >
right
</ body >
</ html >

6 Foot.html：往往是系统状态显示其中。

< html >
< head >
     < title > 系统状态 </ title >
</ head >
< body >
Foot

</ body >
</ html >

 测试通过

当然水木清华用的不是图片显示，如何使用类似于南大BBS的图片呢？

只要修改Change.html代码如下即可:(代码中用到的图片在南大BBS上下载保存到当前目录即可)

< html >
< head >
< script  language ="javascript" > ...
var iniCols, noCols, o_mf, o_ms, s;
function ini() ...{
    o_mf = parent.document.getElementById("leftframe");
    o_ms = document.getElementById("menuImg");
    iniCols = o_mf.cols;
    noCols = iniCols;
    if ((pos = noCols.indexOf(",")) != -1) ...{
        noCols = "0" + noCols.substring(pos);
    }    
    s = false;
}
function changeLeft()...{
    s = !s;
    o_mf.cols = s ? noCols : iniCols;
    o_ms.innerHTML = s ? document.getElementById("menuImg").src="../InterFace/FOpen.gif" : document.getElementById("menuImg").src="../InterFace/FClose.gif";
}
</ script >
</ head >
< body  onload =ini() >
< table  width =100%  height =100%  border =0  cellpadding =0  cellspacing =0 >< tr >< td  onclick ="changeLeft()" >
< img  id ="menuImg"  width ="8"  height ="100"  align ="absmiddle"  src ="../InterFace/FClose.gif" />
</ td ></ tr ></ table >
</ body ></ html >

 

  最终效果如下图：

   

 

同时使用Firefox测试，测试通过！