如何为一个网页中的frameset里两个frame中间添加一个伸缩条

简介: 增加一个html页面,定义frameset,如下:              switchLeft.

增加一个html页面,定义frameset,如下:

<frameset cols="*,1024,*" frameborder="no" border="0" framespacing="0">
<frame src="about:blank"></frame>
<frameset cols="178,10,*" frameborder="no" border="0" framespacing="0" id="MainFrame">
    <frame src="Left.aspx" name="left" scrolling="no" id="left" title="left" />
    <frame id="leftbar" scrolling="no" noresize="" name="switchLeftFrame" src="switchLeft.html"/>
    <frame src="center.aspx" name="center" id="center" title="center" scrolling="auto" />
</frameset>
<frame src="about:blank"></frame>
</frameset>
<noframes>
</noframes>

 

 

switchLeft.html文件:

<html>
<head>
<title>cssrain</title>
<meta charset="gb2312" content="text/html;" http-equiv="Content-Type"/>
<script language="javascript">

function switchSysBar()

{
       if (parent.document.getElementById('MainFrame').cols=="178,10,*")

      {
            document.getElementById('leftbar').style.display="";
            parent.document.getElementById('MainFrame').cols="0,10,*";
      }
     else 
      {
             parent.document.getElementById('MainFrame').cols="178,10,*";
             document.getElementById('leftbar').style.display="none"
      }
 
}


function load()

{
      if (parent.document.getElementById('MainFrame').cols=="178,10,*")

      {
      }
}

 

</script>
</head>
<body marginwidth="0" marginheight="0" bgcolor="#000000" onload="load()" topmargin="0" leftmargin="0">
<center>
<table height="100%" cellspacing="0" cellpadding="0" border="0" width="100%">
<tbody>
<tr>
<td bgcolor="#009fef" width="1">
<img height="1" width="1" src="images/ccc.gif"/>
</td>
<td id="leftbar" bgcolor="#f5f4f4" style="display: none;">
<a onclick="switchSysBar()" href="javascript:void(0);">
<img height="90" border="0" width="9" alt="展开左侧菜单" src="images/pic01.gif"/>
</a>
</td>
<td id="rightbar" bgcolor="#f5f4f4">
<a onclick="switchSysBar()" href="javascript:void(0);">
<img height="90" border="0" width="9" alt="隐藏左侧菜单" src="images/pic02.gif"/>
</a>
</td>
</tr>
</tbody>
</table>
</center>
</body>
</html>

相关文章
|
2月前
|
前端开发
css图标合并——ClipPath Sprites技术
css图标合并——ClipPath Sprites技术
30 1
|
4月前
|
前端开发
什么是CSS Sprite,以及如何在页面或网站中使用它
什么是CSS Sprite,以及如何在页面或网站中使用它
66 1
|
Java
frameset与frame页面布局
frameset与frame页面布局
90 0
|
前端开发 容器
css移动端设置底部导航栏
css移动端设置底部导航栏文章学习
418 0
css移动端设置底部导航栏
layer弹出iframe的高度不自适应。一直是150px
通常,我们这样写没问题,但是,当我们需要页面加载后直接就弹出layer时,最常见应用场景就是注册页面加载后直接触发layer,弹出注册协议。 这时候问题来了,我们会发现 弹出的iframe的高度一直是150px,高度并不自适应。 经分析:原因就是layer计算ifram的时候,页面还没加载完全,而ifram本身就是通过页面的高度的进行计算的(因为我高度设置的80%)
343 0
|
前端开发
css3新属性position: sticky 一分钟实现 导航栏悬停功能
想必很多前端小伙伴经常会在开发中遇到这样一个需求,就是在下划时,导航栏悬停在屏幕最上方,例如csdn网站: 那么你们都是使用什么方法实现的呢?今天我们就用css3的一个新的属性position: sticky 来实现这个功能吧,坚持看下去,就只需一分钟就能搞定。
397 0
css3新属性position: sticky 一分钟实现 导航栏悬停功能
|
移动开发 HTML5
HTML5/CSS3图片左右切换弹性动画
在线演示 本地下载
1144 0