自创的菜单可缩进的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的形式来做这种布局较好。
- 自创的菜单可缩进的frameset布局
- frameset\frame的布局
- 自创的easyui分页
- 自创的健身操
- 自创的分割线
- 垂直菜单的布局
- 跨帧 (frameset,freame,iframe) 的无限级菜单
- frameset和div常规布局的优缺点比较
- 框架布局,用Frameset如何实现固定宽度的居中
- 网页设计与布局(frame、frameset和iframe的区别
- frameset和div常规布局的优缺点比较
- html 利用 frameset 进行简单的框架布局
- 网页设计与布局(frame、frameset和iframe的区别)
- frameset和div常规布局的优缺点比较
- 中国特色的自创英文单词[中英对照]
- 可编辑的下拉菜单
- 可编辑的下拉菜单
- 可编辑的下拉菜单
- C++的四个类型转换运算符
- Nginx中的正则表达式
- Java开源建站工具
- Ubuntu 10.04搭建ftp server
- 用MyEclipse编写第一个Java应用程序的步骤:
- 自创的菜单可缩进的frameset布局
- 上个大家都爱看的 【最新的外企待遇】
- 理解 Linux 的处理器负载均值(翻译)
- zoj 1505 || poj 1198 Solitaire(状态压缩+双向BFS)
- Android学习二之Activity(一)
- 写了个会员信息管理程序,希望大虾帮忙找下错和拆成多文件代码
- 多台电脑共用一个开发证书的方法
- Frederick Brooks: 计算机科学家的使命是制造工具 II, 翻译连载第2部分
- 在Vim当中使用vimwiki