出发左边菜单，右边跳转到该页面
<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'main.jsp' starting page</title>
</head>
<frameset >
<frameset id="mainframe" cols="260,12,*" rows="*">
<frame name="tree" src="tree.jsp" frameborder="0" id="tree" style="border-right:hidden;" />
<frame name="divline" src="line.jsp" frameborder="0" id="divline" noresize/>
<frame name="active" src="contend.jsp" frameborder="0" id="active" />
</frameset>
</frameset>
</html>
tree.jsp菜单
<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'contend.jsp' starting page</title>
<link href="css/NM1.css" type=text/css rel=StyleSheet>
</head>
<body class=pagecss style="OVERFLOW: visible" scroll=yes>
<TABLE style="HEIGHT: 100%" cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD id=menubar vAlign="top" align="left" width="220"><br /><br /><br /><br />
<TABLE cellSpacing=0 cellPadding=2 width="100%" border=0>
<TBODY>
<TR>
<TD class=submenu id=blueidea>
<TABLE cellSpacing=0 cellPadding=2 width="100%" border=0>
<TBODY>
<TR>
<TD
onmouseup="with(findObj('forums').style){display=display=='none'?'':'none';this.style.backgroundImage=display!='none' ? 'url(images/gif-0134.gif)' : 'url(images/gif-0128.gif)'}"
class=folder>aaaaaa
</TD>
</TR>
<TR>
<TD class=submenu id=forums style="DISPLAY: none">
<TABLE cellSpacing=0 cellPadding=2 width="100%" border=0>
<TBODY>
<TR>
<TD class=iefile>
<A target="active" href="jump.do">bbbb</A>
</TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>
</body>
</html>
<script type="text/javaScript">
function findObj(theObj, theDoc)
{
var p, i, foundObj;
if(!theDoc) theDoc = document;
if( (p = theObj.indexOf("?")) > 0 && parent.frames.length)
{
theDoc = parent.frames[theObj.substring(p+1)].document;
theObj = theObj.substring(0,p);
}
if(!(foundObj = theDoc[theObj]) && theDoc.all) foundObj = theDoc.all[theObj];
for (i=0; !foundObj && i < theDoc.forms.length; i++)
foundObj = theDoc.forms[i][theObj];
for(i=0; !foundObj && theDoc.layers && i < theDoc.layers.length; i++)
foundObj = findObj(theObj,theDoc.layers[i].document);
if(!foundObj && document.getElementById) foundObj = document.getElementById(theObj);
return foundObj;
}
</script>
line.jsp 基准线控制折叠
<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">
function changeLeft(){
s = !s;
o_mf.cols = s ? noCols : iniCols;
o_ms.innerHTML = s ? "►" : "◄";
}
function init() {
o_mf = parent.document.getElementById("mainframe");
o_ms = document.getElementById("menuSwitch");
noCols = iniCols = o_mf.cols;
if ((pos = noCols.indexOf(",")) != -1) {
noCols = "0" + noCols.substring(pos);
}
s = false;
}
</script>
<link href="css/NM1.css" type=text/css rel=StyleSheet>
<title></title>
</head>
<body onLoad="init()" class="bodycss" style="margin:0;">
<table style="width:100%; height:100%;" border='0' cellpadding='0' cellspacing='0'>
<tr>
<td>
<button id ="menuSwitch" class="ctbutton" onClick="changeLeft()"; >◄</button>
</td>
</tr>
</table>
</body>
</html>
contend.jsp 内容页是随时变化的，由左边菜单事件决定
例如<A target="active" href="jump.do">bbbb</A> 会调用jump.do跳转新的页面，不过会在以active为名的frame 的框架中显示
二、
如果需要的是右边的内容页面不动，而是由菜单事件调用不同的action转向
主框架
<table width="100%" style="height:881px;" border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="tree" width="12%" valign="top"><iframe name="tree" id="tree" height="100%" width="15%" src="jsp/htmlmanager/htmlTree.jsp" /></td>
<td id="con" width="88%" valign="top"><iframe name="active" id="active" height="100%" width="84%" src="jsp/htmlmanager/htmlHome.jsp" /></td>
</tr>
</table>
htmlTree.jsp菜单
<%@ page language="java" session="true" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 1.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>静态页面维护</title>
<meta http-equiv="content-type" content="text/html;" />
<meta name="generator" content="editplus" />
<meta name="author" content="t" />
<meta name="keywords" content="二级树形菜单" />
<meta name="description" content="二级树形菜单示例" />
<style type="text/css" media="all">
a,a:visited {color:#333;text-decoration:none;}
a:hover {color:#f60;cursor:default}
body,td {font:13px "Geneva","宋体", "Arial", "Helvetica",sans-serif;}
ul,li {margin:0;padding:0;list-style:none;}
h1,h2,h3,h4,h5,h6 {margin:0;padding:0;}
h1 {padding:5px;color:#900;font:16px bold "Geneva","宋体", "Arial", "Helvetica",sans-serif;}
h1 small {font-size:11px;font-weight:normal;color:#660;}
.TreeWrap {width:200px;}
.MenuBox .titBox a,
.MenuBox .titBox a:visited,
.MenuBox2 .titBox a,
.MenuBox2 .titBox a:visited {margin-left:10px;padding-left:40px;color:#003;font-size:13px;display:block;}
.MenuBox .titBox h3 a {background:url(../../resources/images/tree/ico_folder_open_lst.gif) no-repeat 0 40%;}
.MenuBox .titBox h3.Fst a {background:url(../../resources/images/tree/ico_folder_open_fst.gif) no-repeat 0 40%;}
.MenuBox .titBox h3.Lst a {background:url(../../resources/images/tree/ico_folder_open_lst.gif) no-repeat 0 40%;}
.MenuBox2 .titBox h3 a {background:url(../../resources/images/tree/ico_folder.gif) no-repeat 0 40%;}
.MenuBox2 .titBox h3.Fst a {background:url(../../resources/images/tree/ico_folder_fst.gif) no-repeat 0 40%;}
.MenuBox2 .titBox h3.Lst a {line-height:250%;background:url(../../resources/images/tree/icon_exit.gif) no-repeat 0 0;}
.MenuBox2 .txtBox {display:none;}
.MenuBox .txtBox ul li {padding-left:65px;line-height:150%;}
.MenuBox .txtBox .num {color:#e00;}
.MenuBox .txtBox ul {background:url(../../resources/images/tree/line_y.gif) repeat-y 16px 0;}
.MenuBox .txtBox ul li {background:url(../../resources/images/tree/t_s.gif) no-repeat 28px 50%;}
.MenuBox .txtBox ul li.Lst {background:url(../../resources/images/tree/t_lst.gif) no-repeat 28px 50%;}
</style>
<script type="text/javascript">
function ExChgClsName(Obj,NameA,NameB){
var Obj=document.getElementById(Obj)?document.getElementById(Obj):Obj;
Obj.className=Obj.className==NameA?NameB:NameA;
}
function showMenu(iNo){
ExChgClsName("Menu_"+iNo,"MenuBox","MenuBox2");
}
function send (typeName)
{
//调用另一个iframe的方法来控制另个页提交
[color=red] parent.frames("active").location.href= "../../htmlPresent.do?vo.typeName="+typeName;[/color]
return true;
}
function publish ()
{
parent.frames("active").location.href= "../../htmlPresent.do?publish=1";
return true;
}
</script>
</head>
<body>
<h1>静态页面维护</h1>
<div class="TreeWrap">
<hr>
<!--MenuBox-->
<div class="MenuBox" id="Menu_0">
<div class="titBox">
<h3 class="Fst"><a href="javascript:showMenu(0);">首页</a></h3>
</div>
<div class="txtBox">
<ul style="background:none">
<li><a href="#" onclick="send('index_right');">右侧展示推广</a></li>
<li><a href="#" onclick="send('index_hot');">焦点项目</a></li>
<li><a href="#" onclick="send('talkindex');">人物访谈</a></li>
<li><a href="#" onclick="send('conclude');">成交实例</a></li>
<li class="Lst"><a href="#" onclick="send('cooperationpartner');">合作伙伴</a></li>
</ul>
</div>
</div>
<!--MenuBox-->
<div class="MenuBox" id="Menu_1">
<div class="titBox">
<h3 class="Fst"><a href="javascript:showMenu(1);">写字楼频道</a></h3>
</div>
<div class="txtBox">
<ul>
<li><a href="#" onclick="send('nav');">顶部导航</a></li>
<!-- <li ><a href="#" onclick="send('quicksearch');">quicksearch.html</a></li>-->
<li><a href="#" onclick="send('freepub');">免费发布信息</a></li>
<li><a href="#" onclick="send('ad01');">横条广告</a></li>
<li><a href="#" onclick="send('talk');">人物访谈</a></li>
<li><a href="#" onclick="send('renthot');">热租项目</a></li>
<li><a href="#" onclick="send('ad02');">右侧广告</a></li>
<li><a href="#" onclick="send('store');">旺铺底商</a></li>
<li><a href="#" onclick="send('hotnews');">热点资讯</a></li>
<li><a href="#" onclick="send('rule');">行业规范</a></li>
<li><a href="#" onclick="send('zoneoffice');">商圈写字楼</a></li>
<li class="Lst"><a href="#" onclick="send('subjects');">专题图片</a></li>
</ul>
</div>
</div>
<!-- add MenuBox-->
<!-- add MenuBox-->
<!--MenuBox-->
<div class="MenuBox2">
<div class="titBox"><h3 class="Lst"><a href="#" onclick="publish()">全部发布</a></h3></div>
</div>
<!--MenuBox-->
</div>
</body>
</html>
htmlHome.jsp
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%@ taglib uri="/WEB-INF/tlds/struts-html.tld" prefix="html"%>
<html:html>
<head>
<link rel="stylesheet" type="text/css" href="./resources/theme/zh_CN/fscs.css">
<link rel="stylesheet" type="text/css" href="./resources/theme/news.css">
</head>
<body style="background-color: #DEEFFC">
<html:form action="/htmlPresent">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr style="background-color: #DEEFFC">
<td class="home-bg" style="background-color: #DEEFFC"></td>
</tr>
</table>
<html:hidden property="vo.typeName" name="htmlManagerForm"/>
<html:hidden property="publish" name="htmlManagerForm"/>
</html:form>
</body>
</html:html>
分享到：
相关推荐
QUI网页界面集成框架是一套完整的企业级前端解决方案，由组件库、皮肤框架、示例工程和文档4部分组成。 强大的组件：组件种类丰富、功能强大、使用方式非常简单、兼容性好； 华美的界面：上百套皮肤风格，多样的...
Frame框架.rar
html 页面 frame框架 伸缩弹窗 html 页面 frame框架 伸缩弹窗
多样式frame框架控件多样式frame框架控件多样式frame框架控件多样式frame框架控件多样式frame框架控件多样式frame框架控件
web 页面 Frame 框架 技术web 页面 Frame 框架 技术web 页面 Frame 框架 技术
所谓框架便是网页画面分成几个框窗，同时取得多个 URL。只 要 <FRAMESET> <FRAME> 即可，而所有框架标记 要放在一个总起的 html 档，这个档案只记录了该框架 如何划分，不会...本文档教你如何在.net中使用frame 框架
A-Frame框架样板，下载后直接在上面编码即可运行，即普通浏览器即可体验VR世界。
frame页面框架示例，分上、左、下三块，左侧只有单一示例菜单。
自定义 Frame框架框架,漂亮啊-精品源代码
Javascript，Html，Css，Frame，Frameset框架整合的菜单，左则菜单可以收缩，上面菜单有并排的子菜单！
一个很好的frame框架和HTML相结合的示例
Html frame框架 左右隐藏 测试
多样式frame框架控件
Python_tkinter_10_Frame_框架_(GUI_窗口_教学教程tutorial)
Frame(框架的使用),通过使用框架你可以免除因页面跳转而引起的整个页面频繁刷新
UUR frame框架，用于快速搭建web工程的前端使用，很好用的
网页设计的frame框架技术 网页设计的frame框架技术
基于 goframe 框架实现的Web后台服务，用于自学 goframe 框架。实现【用户管理】【角色管理】【数据权限】【菜单权限】【系统日志】【登陆日志】等基本功能.zip 适合学习/练手、毕业设计、课程设计、期末/期中/大...
如果您想使用Golang开发一个业务型项目，无论是小型还是中大型项目，GoFrame是您的不二之选。如果您想开发一个Golang组件库，GoFrame提供开箱即用、丰富强大的基础组件库也能助您的工作事半功倍。如果您是团队Leader...
在使用Delphi时，相信使用Frame框架的人不多，今天无意中发现了Frame框架的妙用，其功能之强大，特示例之