フレームワーク使用
左メニューを出発し、右からページにジャンプします
tree.jspメニュー
line.jsp基準線制御折りたたみ
contend.jspコンテンツページは随時変化し,左メニューイベントによって決定される.
例えばbbbbがjumpを呼び出す.do新しいページをジャンプしますが、activeという名前のframeのフレームに表示されます
二、
必要なのは右のコンテンツページが動かず、メニューイベントから異なるactionを呼び出して転向する場合です.
メインフレーム
htmlTree.jspメニュー
htmlHome.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 '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コンテンツページは随時変化し,左メニューイベントによって決定される.
例えばbbbbが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>