折叠框架实现方法-JavaScript-Html

2009年7月14日 发表评论 阅读评论

折叠框架在大型的社区论坛中使用非常频繁,最有代表性的就是天涯和猫扑。我这里使用JavaScript在Html中实现折叠框架/隐藏窗口,具体代码在下面来看下。

首先我们来看下折叠框架(Frame)的效果:折叠框架Demo

我们可以看到当点击中部的按钮时,左边的窗口框架隐藏,右边的框架覆盖左边的框架布满整个窗口。实现的方法最主要在于中部按钮代码的实现,听哦难过JavaScript来实现,下面来一步一步介绍如何实现。

1.创建七个Html文件,文件名分别为brank-right-frame.html、chapter1.html、chapter2.html、chapter3.html、index.html、left-frame.html、swich.html。

2.index.html中添加以下代码:

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="keywords" content="张爱玲:倾城之恋(1943年作品),张爱玲,其他,文学,原创,小说,青柠檬" />
<meta name="description" content="张爱玲的作品张爱玲:倾城之恋(1943年作品)" />
<title>张爱玲:倾城之恋</title>
<frameset rows="*" cols="160,10,*" bordercolor="#666666" frameborder="no" 
id="attachucp" framespacing="0" border="0">
   <frame src="left-frame.html" scrolling="no" name="win01">
   <frame src="swich.html" id="leftbar" scrolling="no" noresize="" name="switchFrame">
   <frame src="brank-right-frame.html" name="win02">
</frameset>
<noframes>
   please use a Web browser such as IE3.0 or Netscape Navigetor to view this page in frames!
</noframes>
</head>
<body style="overflow-x:hidden">
</body>
</html>

3.在brank-right-frame.html中添加

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="keywords" content="张爱玲:倾城之恋(1943年作品),张爱玲,其他,文学,原创,小说,青柠檬" />
<meta name="description" content="张爱玲的作品张爱玲:倾城之恋(1943年作品)" />
<title>张爱玲:倾城之恋</title>
<style type="text/css">
<!--
.STYLE1 {font-family: "宋体"}
-->
</style>
</head>
<body>
<h1 align="center">&nbsp;</h1>
<h1 align="center">《倾城之恋》</h1>
<p class="STYLE1">&nbsp;</p>
<table width="959" height="292" border="1" align="center" bordercolor="#99DFFF">
  <tr>
    <td width="201" height="286" align="center"><span class="STYLE1">
    <img src="http://farm3.static.flickr.com/2587/3720101522_ce82d3f3b9.jpg" 
    width="200" height="282"></span></td>
    <td width="742" align="center">
      <p class="STYLE1"> 《倾城之恋》是张爱玲的成名作与代表作。</p>
      <p class="STYLE1">白流苏和范柳原这一对现实庸俗的男女,在战争的兵
      荒马乱之中被命运掷骰子般地掷到了一起,</p>
      <p class="STYLE1">于“一刹那”体会到了“一对平凡的夫妻”之间的“一点真心”……</p>
      <p class="STYLE1">本书还收录了张爱玲1943年创作的中短篇小说。</p></td>
  </tr>
</table>
<p class="STYLE1">&nbsp;</p>
<p class="STYLE1"></p>
<p class="STYLE1">&nbsp;</p>
</body>
</html>

4.在left-frame.html中添加:

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>left-frame</title>
<style type="text/css">
<!--
a:link {
	color: #333333;
}
a:visited {
	color: #999999;
}
-->
</style></head>
<body>
	<p><a href="brank-right-frame.html" tabindex="序" title="序" accesskey="序" 
        target="win02">序</a></p>
	<p><a href="chapter1.html" tabindex="第一章" title="第一章" accesskey="第一章" 
        target="win02">1.第一章</a></p>
	<p><a href="chapter2.html" tabindex="第二章" title="第二章" accesskey="第二章" 
        target="win02">2.第二章</a></p>
	<p><a href="chapter3.html" tabindex="第三章" title="第三章" accesskey="第三章" 
        target="win02">3.第三章</a></p>
	<p><a href="http://dengchao.org" tabindex="更多" title="更多,本链接在网络连通情况
        下可链接到目的地址" accesskey="更多" target="win02">更多..</a></p>
	</body>
</html>

5.swich.html中添加:

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>cssrain</title>
<script language="javascript">
 
function switchSysBar(){
 if (parent.document.getElementById('attachucp').cols=="160,10,*"){
 document.getElementById('win01').style.display="";
 parent.document.getElementById('attachucp').cols="0,10,*";
 }
 else{
 parent.document.getElementById('attachucp').cols="160,10,*";
 document.getElementById('win01').style.display="none"
 }
}
function load(){
 if (parent.document.getElementById('attachucp').cols=="0,10,*"){
 document.getElementById('win01').style.display="";
 }
}
 
</script>
</head>
<body marginwidth="0" marginheight="0" bgcolor="#ffffff" 
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" http://farm3.static.flickr.com/2646/3719289763_b9f9a4922c_t.jpg"/>
</td>
<td width="398" bgcolor="#f5f4f4" id="win01" style="display: none;">
<a onClick="switchSysBar()" href="javascript:void(0);">
<img height="90" border="0" width="9" alt="展开左侧菜单" 
src="http://farm3.static.flickr.com/2511/3719289757_f2d0e77fb7_t.jpg"/></a></td>
<td width="622" id="win02" >
<a onClick="switchSysBar()" href="javascript:void(0);">
<img height="90" border="0" width="9" alt="隐藏左侧菜单" 
src="http://farm3.static.flickr.com/2644/3719289753_0e65476760_t.jpg"/></a></td>
</tr>
</tbody>
</table>
</center>
</body>
</html>

6.chapter1、chapter2、chapter3随便自己添加些内容。

7.好了,大功告成,在浏览器中打开index.html看看折叠框架效果吧!

http://it.dengchao.org
声明: 本文采用 BY-NC-SA 协议进行授权. 转载请注明转自: 折叠框架实现方法-JavaScript-Html
  1. 本文目前尚无任何评论.
  1. 本文目前尚无任何 trackbacks 和 pingbacks.