frame框架使用
出发左边菜单，右边跳转到该页面<%@ 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.document; theObj = theObj.substring(0,p); } if(!(foundObj = theDoc) && theDoc.all) foundObj = theDoc.all; for (i=0; !foundObj && i < theDoc.forms.length; i++) foundObj = theDoc.forms; for(i=0; !foundObj && theDoc.layers && i < theDoc.layers.length; i++) foundObj = findObj(theObj,theDoc.layers.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><bodyclass="bodycss" style="margin:0;"><tablestyle="width:100%; height:100%;" border='0' cellpadding='0' cellspacing='0'><tr><td><button id ="menuSwitch" class="ctbutton" ; >◄</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的方法来控制另个页提交 parent.frames("active").location.href= "../../htmlPresent.do?vo.typeName="+typeName; 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="#" >右侧展示推广</a></li><li><a href="#" >焦点项目</a></li><li><a href="#" >人物访谈</a></li><li><a href="#" >成交实例</a></li><li class="Lst"><a href="#" >合作伙伴</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="#" >顶部导航</a></li><!-- <li ><a href="#" >quicksearch.html</a></li>--><li><a href="#" >免费发布信息</a></li><li><a href="#" >横条广告</a></li><li><a href="#" >人物访谈</a></li><li><a href="#" >热租项目</a></li><li><a href="#" >右侧广告</a></li><li><a href="#" >旺铺底商</a></li><li><a href="#" >热点资讯</a></li><li><a href="#" >行业规范</a></li><li><a href="#" >商圈写字楼</a></li><li class="Lst"><a href="#" >专题图片</a></li></ul></div></div><!-- add MenuBox--> <!-- add MenuBox--> <!--MenuBox--><div class="MenuBox2"><div class="titBox"><h3 class="Lst"><a href="#" >全部发布</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>
页:
[1]