本示例主要通过jquery改变frame的大小,实现隐藏和展示功能
1、index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<frameset rows="80,*" cols="*" frameborder="no" border="0" framespacing="0">
<frame src="top.jsp" name="top" scrolling="No" noresize="noresize" id="top" />
<frameset cols="100,*" frameborder="no" border="0" framespacing="0">
<frame src="a.jsp" name="a" scrolling="No" noresize="noresize" id="a" />
<frame src="b.jsp" name="b" id="b" />
</frameset>
</frameset>
<noframes><body>
</body>
</noframes>
</html>
2、a.jsp页面
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ page import="java.util.*" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<!-- 引入jquery的库 -->
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$("#aId").click(function(){
if($("#left_staus").val() == "打开"){
$("#left_staus").val("关闭");
closeFrameset();
}else if($("#left_staus").val() == "关闭"){
$("#left_staus").val("打开");
openFrameset();
}
})
});
function closeFrameset(){
var fs = parent.document.getElementsByTagName("frameset")[1];
fs.cols = "25,*";
document.getElementById("aId").innerHTML = "a页面打开";
}
function openFrameset(){
var fs = parent.document.getElementsByTagName("frameset")[1];
fs.cols = "65,*";
document.getElementById("aId").innerHTML = "a页面关闭";
}
</script>
</head>
<body bgcolor="red">
<div id="aId">a页面打开</div>
<input type="hidden" name="left_staus" id="left_staus" value="打开">
</body>
</html>
3、b.jsp页面
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
</head>
<body bgcolor="green">
<div id="b">b页面</div>
</body>
</html>
4、top.jsp页面
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>top.jsp</title>
<!-- 引入jquery的库 -->
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$("#top").click(function(){
if($("#top_staus").val() == "打开"){
$("#top_staus").val("关闭");
closeFrameset();
}else if($("#top_staus").val() == "关闭"){
$("#top_staus").val("打开");
openFrameset();
}
})
});
function closeFrameset(){
var fs = parent.document.getElementsByTagName("frameset")[0];
fs.rows = "25,*";
document.getElementById("top").innerHTML = "top页面打开";
}
function openFrameset(){
var fs = parent.document.getElementsByTagName("frameset")[0];
fs.rows = "65,*";
document.getElementById("top").innerHTML = "top页面关闭";
}
</script>
</head>
<body bgcolor="blue">
<div id="top">top页面打开</div>
<input type="hidden" name="top_staus" id="top_staus" value="打开">
</body>
</html>
测试浏览器:ie7
- 大小: 22 KB
- 大小: 22.7 KB
分享到:
相关推荐
frame页面框架示例,分上、左、下三块,左侧只有单一示例菜单。
if (parent.document.getElementById('pageframe').cols=="218,8,*"){ parent.document.getElementById('pageframe').cols="0,8,*"; imgid.src="gd2.gif"; } else{ parent.document.getElementById('pageframe')....
在jsp页面中,frame之间以及子页面和父页面间参数是如何传递的?
web 页面 Frame 框架 技术web 页面 Frame 框架 技术web 页面 Frame 框架 技术
页面布局frameset frame
html 页面 frame框架 伸缩弹窗 html 页面 frame框架 伸缩弹窗
C语言头文件 FRAMEC语言头文件 FRAMEC语言头文件 FRAMEC语言头文件 FRAMEC语言头文件 FRAMEC语言头文件 FRAMEC语言头文件 FRAMEC语言头文件 FRAMEC语言头文件 FRAMEC语言头文件 FRAMEC语言头文件 FRAMEC语言头文件 ...
web开发中非常简单漂亮的frame后台页面(带ichart图表),html5格式,非常漂亮,页面包含ichart图表的所有js
页面代码防止frame禁止右键 拿来就可以使用方便快速
打开即可演示,功能简洁明了,适合初学者 Frame的NavigationUIVisibility属性设置为Hidden:
MFC源代码 FRAME2.03MFC源代码 FRAME2.03MFC源代码 FRAME2.03MFC源代码 FRAME2.03MFC源代码 FRAME2.03MFC源代码 FRAME2.03MFC源代码 FRAME2.03MFC源代码 FRAME2.03MFC源代码 FRAME2.03MFC源代码 FRAME2.03MFC源代码 ...
NULL 博文链接:https://fengbin2005.iteye.com/blog/1911553
学习TreeView时做的Demo测试小程序,含全部源码、exe,在CB10.1上通过,其中用到了一个自制的闪烁Label,编译前请把EXE更名。
frame与frame之间如何用JavaScript传值
MFC源代码 FRAME7.03MFC源代码 FRAME7.03MFC源代码 FRAME7.03MFC源代码 FRAME7.03MFC源代码 FRAME7.03MFC源代码 FRAME7.03MFC源代码 FRAME7.03MFC源代码 FRAME7.03MFC源代码 FRAME7.03MFC源代码 FRAME7.03MFC源代码 ...
FRAME与IFRAME的使用方法与区别 两者是如何区分如何工作的
frame,iframe.frameset用法和区别
Delphi中frame的使用Delphi中frame的使用Delphi中frame的使用Delphi中frame的使用Delphi中frame的使用
frame分页显示foot、head、body、左侧边栏例子 清晰明了,绝对可以用,可以点击隐藏左边栏。 稍微研究下,便可知道frameset的原理。适合初学网页设计者。
isframe是个分布式信息系统架构中间件,本系统可以跨越多种数据库共享数据,并实现多个数据节点之间的协同工作