自创的菜单可缩进的frameset布局

来源:互联网 发布:h5游戏源码下载 编辑:程序博客网 时间:2024/06/01 07:55

原创的菜单栏可进行缩放的frameset布局。

以前做项目都是项目经理搭好架子,项目组成员进场开发自己的业务即可,这次自己做了个页面的整体布局,如下代码所示:


frameset.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> new document </title>  
 </head>
  <frameset rows="80,*" cols="*" frameborder="no" border="0" framespacing="0">
  <frame src="a.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" />
  <frameset cols="80,10,*" frameborder="no" border="0" framespacing="0">
    <frame src="b.html" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame" title="leftFrame" />
    <frame src="flag.html" name="flag" scrolling="No" noresize="noresize" id="flag" title="flag" />
    <frame src="c.html" name="mainFrame" id="mainFrame" title="mainFrame" />
  </frameset>
</frameset>
</html>

a.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body style="background:red">
title
</body>
</html>


b.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> new document </title>
 </head>
 <body style="background:navy">
  <a href="1.html" target="mainFrame">1</a><br/>
  <a href="2.html" target="mainFrame">2</a><br/>
  <a href="3.html" target="mainFrame">3</a><br/>
  <a href="4.html" target="mainFrame">4</a><br/>
 </body>
</html>

关键是这个加在两个html之间的控制菜单缩放的html,它里面仅有一个控制图片和一些js代码而已,原来就总是想不明白,怎么把这个控制图片加到左边的菜单上,后来想到用一个页面来实现,代码如下,注意需要引入jquery:

flag.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> new document </title>
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript">
  <!--
    $(function(){
        $("#flag").toggle(function(){
            var fs = parent.document.getElementsByTagName("frameset")[1];
            fs.cols = "0,10,*";
            $("#flag").attr("src","btn_show.gif");
        },function(){
            var fs = parent.document.getElementsByTagName("frameset")[1];
            fs.cols = "80,10,*";
            $("#flag").attr("src","btn_hide.gif");
        });
    });
  //-->
  </script>
 </head>

 <body style="position:relative">
  <img id="flag" style="cursor:pointer;position:absolute;right:0px;top:250px" src="btn_hide.gif"></img>
 </body>
</html>

效果如图:


点击按钮后的效果如图:


如此完美实现了菜单的缩进效果。

之前曾经用iframe的形式实现过类似的效果,即中间的工作区以iframe的形式嵌入进去,不过在实际开发中,发现有些问题不好解决

1、iframe的高度适应

2、就是左边菜单的缩进问题

自我感觉还是用frameset的形式来做这种布局较好。