使用ajaxtags實現菜單級連

<%@page contentType="text/html;charset=UTF-8" %>
<%@taglib uri="http://jakarta.apache.org/struts/tags-html" prefix="html"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>main</title>
<link href="${pageContext.request.contextPath}/css/main.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/prototype-1.4.0.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/scriptaculous.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/overlibmws.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/ajaxtags-1.2-beta2.js"></script>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/ajaxtags.css" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/displaytag.css" />
<script language="javascript">
var baseUrl = "${pageContext.request.contextPath}";
var currTimeT='FTD0311_SNPH_R';
var histT='FTD0322_SNP_C';
var fName='BRFL';
var currentTable=currTimeT;
var disPicUrl=baseUrl+'/qxxx/cache/images/'+currentTable+'/BRFL/';

</script>
<script src="${pageContext.request.contextPath}/js/comm.js" type="text/javascript"></script>
<script language="javascript">
window.οnlοad=Page_Load;

function showHistory(flag)
{
if (flag==1)
{
<c:if test="${param.meeting != '1'}">
document.all.showHistoryYear.style.display = '';
document.all.showHistoryYearInfor.style.display = '';
document.all.showHistoryTypes.style.display='';
</c:if>
$('selectpic').value=2;
currentTable=histT;
disPicUrl=baseUrl+'/qxxx/cache/images/'+currentTable+'/BRFL/';
}
else
{
document.all.showHistoryYear.style.display = 'none';
document.all.showHistoryYearInfor.style.display = 'none';
document.all.showHistoryTypes.style.display='none';
$('selectpic').value=1;
currentTable=currTimeT;
disPicUrl=baseUrl+'/qxxx/cache/images/'+currentTable+'/BRFL/';
}
//alert(disPicUrl);
$('seltime').fireEvent("onchange");
}

function getPictList()
{
var retStr = "";
for (i=0;i<document.all["drpPicture"].options.length;i++)
{
if (retStr == "")
{
retStr = document.all["drpPicture"].options[i].value;
}
else
{
retStr = retStr + "," + document.all["drpPicture"].options[i].value;
}
}
return retStr;
}
</script>
</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" height="100%">
<table width="98%" border="0" cellpadding="0" cellspacing="0" class="table-space">
<!-- 上弧 -->
<tr>
<td height="7"> <table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="7"><img src="${pageContext.request.contextPath}/images/table_top_left.gif" width="7" height="7"></td>
<td background="${pageContext.request.contextPath}/images/table_top_bg.gif"><img src="${pageContext.request.contextPath}/images/spacer.gif" width="1" height="1"></td>
<td width="7"><img src="${pageContext.request.contextPath}/images/table_top_right.gif" width="7" height="7"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<!-- 左直線 -->
<td width="1" bgcolor="B8B8B8"><img src="${pageContext.request.contextPath}/images/spacer.gif" width="1" height="1"></td>
<td class="table-bg"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="ititle">雲圖選擇</td>
</tr>
<tr>
<td align="center">當前衛星:
<select name="seltime" id="seltime" style="width:86"><!-- onChange=showhistory()-->
<c:forEach var="scnm" items="${requestScope.scnmList}" >
<option value="${scnm.satcd}">${scnm.satnm}</option>
</c:forEach>
</select>
</td>
</tr>
<tr>
<td class="b1">
<input type="hidden" id="selectpic" name="selectpic" value="1" />
<table width="100%" border="0" cellspacing="0" cellpadding="1">
<tr><td width="18"><input id="selectpic1" type="radio" name="radiobutton" value="radiobutton" onClick="showHistory(0,this);" checked></td><td><label for="selectpic1" class="lbl">實時氣象雲圖</label></td></tr>
<tr><td><input id="selectpic2" type="radio" name="radiobutton" value="radiobutton" onClick="showHistory(1,this);"></td><td><label for="selectpic2" class="lbl">歷史氣象雲圖</label></td></tr>
<tr><td> </td><td><table width="100%" border="0" cellspacing="0" cellpadding="1"><tr><td width="18"><input id="radioButton12" type="radio" name="radioButton2" onClick="$('imgTyp').value=2019;$('seltime').fireEvent('onchange');" value="radiobutton" checked></td><td><label href="#" onClick="$('radioButton12').click();return false;" class="lbl2">紅外雲圖</label></td></tr></table></td></tr>
<tr><td> </td><td><table width="100%" border="0" cellspacing="0" cellpadding="1"><tr><td width="18"><input id="radioButton13" type="radio" name="radioButton2" onClick="$('imgTyp').value=2018;$('seltime').fireEvent('onchange');" value="radiobutton"></td><td><label href="#" onClick="$('radioButton13').click();return false;" class="lbl2">可見光雲圖</label></td></tr></table></td>
<tr><td> </td><td><table width="100%" border="0" cellspacing="0" cellpadding="1"><tr><td width="18"><input id="radioButton14" type="radio" name="radioButton2" onClick="$('imgTyp').value=8787;$('seltime').fireEvent('onchange');" value="radiobutton"></td><td><label href="#" onClick="$('radioButton14').click();return false;" class="lbl2">水汽雲圖</label></td></tr></table></td>
</tr>
</table><input type="hidden" name="imgTyp" value="2019"/></td>
</tr>
<tr id="showHistoryYear" style="display:none">
<td align="left">   年月選擇:<select name=selYear style="width:52" id=selYear><!-- onChange=showYearPic() -->
<c:forEach var="year" items="${requestScope.yearList}" >
<option value="${year}" <c:if test="${year eq curYear}">selected</c:if> >${year}</option>
</c:forEach>
</select>
<select name=selMonth style="width:38" id=selMonth><!-- onChange=showYearPic() -->
<c:forEach var="month" items="${requestScope.monthList}" >
<option value="${month}" <c:if test="${month eq curMonth}">selected</c:if> >${month}</option>
</c:forEach>
</select>
</td>
</tr>


<tr id="showHistoryTypes" style="display:none">
<td align="left">   類別選擇:<select name=selTypes style="width:94" id=selTypes><!-- onChange=showYearPic() -->
<option value="">全部</option>
<option value="6266">暴雨</option>
<option value="6267">颱風</option>
</select>
</td>
</tr>

<tr id="showHistoryYearInfor" style="display:none">
<td align="left">   天氣過程:<select name=selYearPic style="width:94" id=selYearPic>

</select>
</td>
</tr>
<!-- 右直線 --> </table></td>
<td width="1" bgcolor="B8B8B8"><img src="/images/spacer.gif" width="1" height="1"></td>
</tr>
</table></td>
</tr>
<!-- 下弧 -->
<tr>
<td height="8"> <table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="7"><img src="${pageContext.request.contextPath}/images/table_bottom_left.gif" width="7" height="8"></td>
<td background="${pageContext.request.contextPath}/images/table_bottom_bg.gif"><img src="/images/spacer.gif" width="1" height="1"></td>
<td width="7"><img src="${pageContext.request.contextPath}/images/table_bottom_right.gif" width="7" height="8"></td>
</tr>
</table></td>
</tr>
</table>
<table width="98%" border="0" cellpadding="0" cellspacing="0" class="table-space">
<tr>
<td height="7"> <table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="7"><img src="${pageContext.request.contextPath}/images/table_top_left.gif" width="7" height="7"></td>
<td background="${pageContext.request.contextPath}/images/table_top_bg.gif"><img src="/images/spacer.gif" width="1" height="1"></td>
<td width="7"><img src="${pageContext.request.contextPath}/images/table_top_right.gif" width="7" height="7"></td>
</tr>
</table></td>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="1" bgcolor="B8B8B8"><img src="${pageContext.request.contextPath}/images/spacer.gif" width="1" height="1"></td>
<td class="table-bg"><table width="100%" border="0" cellspacing="0" cellpadding="2">
<tr>
<td class="ititle">播放控制</td>
</tr>
<tr>
<td align="left">  
選擇衛星雲圖:</td>
</tr>
<tr>
<td align="center">
<select name="drpPicture" id="drpPicture" size="8" multiple class="width" onChange="changePicture();">
<c:forEach var="snph" items="${requestScope.snphList}" >
<option value="${snph.imagePath}"><fmt:formatDate value="${snph.dateTime}" pattern="yyyy-MM-dd HH時mm分"/></option>
</c:forEach>
</select>
</td>
</tr>
<tr>
<td align="center"> <input name="Submit" type="submit" class="buttons" value="第一張" onClick="first()">
<input name="Submit2" type="submit" class="buttons" value="末一張" onClick="last();">
</td>
</tr>
<tr>
<td align="center"> <input name="Submit4" type="submit" class="buttons" value="上一張" onClick="previous();">
<input name="Submit22" type="submit" class="buttons" value="下一張" onClick="next();">
</td>
<tr>
<td align="center"> <input name="Submit3" type="submit" class="buttons" value="動畫顯示" οnclick="autoPlay(this);">
<input name="Submit32" type="submit" class="buttons" value="全 屏" οnclick="showall($('imgTyp').value, getPictList());">
</td>
</tr>
<tr>
<td align="left">  
播放速度:
<select name="showspeed" style="width:86" class=select onChange="changespeed()" id="showspeed">
<option value="200">非常快</option>
<option value="500">快</option>
<option value="1000" selected>正常</option>
<option value="1500">慢</option>
<option value="2500">非常慢</option>
</select></td>
</tr>
</table></td>
<td width="1" bgcolor="B8B8B8"><img src="${pageContext.request.contextPath}/images/spacer.gif" width="1" height="1"></td>
</tr>
</table></td>
</tr>
<tr>
<td height="8"> <table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="7"><img src="${pageContext.request.contextPath}/images/table_bottom_left.gif" width="7" height="8"></td>
<td background="${pageContext.request.contextPath}/images/table_bottom_bg.gif"><img src="/images/spacer.gif" width="1" height="1"></td>
<td width="7"><img src="${pageContext.request.contextPath}/images/table_bottom_right.gif" width="7" height="8"></td>
</tr>
</table></td>
</tr>
</table>
</td>
<!--td width="9" align="right"><a href="#"><img src="images/mini2.gif" width="8" height="87" border="0"></a></td-->
</tr>
</table>
<span id="progressMsg" style="display:none;"><img alt="Indicator" src="${pageContext.request.contextPath}/img/indicator.gif" /> Loading...</span>
<div id="errorMsg" style="display:none;border:1px solid #e00;background-color:#fee;padding:2px;margin-top:8px;width:300px;font:normal 12px Arial;color:#900"></div>
<div>
<img id="makerEmblem"
src="${pageContext.request.contextPath}/img/placeholder.gif"
width="76" height="29" />
</div>
<script type="text/javascript">
function initProgress() {
Element.show('progressMsg');
//autoPlay(document.all.Submit3);
document.all.Submit3.value="動畫顯示";
document.all.Submit3.title="動畫顯示";
autoplaypicture=false;
//$('selYearPic').value = document.all.selYearPic.value;
//alert($('selYear').value + " ?= " + $('selYearPic').value);
parent.showdiv();
}

function resetProgress() {
parent.closediv();
// show marker emblem
document.all.drpPicture[0].selected=true;
var imgTag = $('makerEmblem');
Effect.Fade('progressMsg');
if (document.all.showHistoryYear.style.display == '')
{
//$('selYearPic').fireEvent("onchange");
}

Page_Load();
}

function reportError() {
Element.show('errorMsg');
setTimeout("Effect.DropOut('errorMsg')", 2500);
}

function selectedMe()
{

}

function loadseltimepic()
{
$('selYearPic').fireEvent("onchange");
}
</script>

<script type="text/javascript">
<c:choose>
<c:when test="${param.meeting != '1'}">
new AjaxJspTag.Select(
"${pageContext.request.contextPath}/qxxx/qxxxCasadeMenuAjaxAction.do?action=selectSnph", {
source: "seltime",
preFunction: initProgress,
target: "drpPicture",
parameters: "seltime={seltime},imgTyp={imgTyp},selYear={selYear},,selMonth={selMonth},selTypes={selTypes},selectpic={selectpic},mode=2",
parser: new ResponseXmlParser(),
postFunction: resetProgress,
errorFunction: reportError
});
/*
new AjaxJspTag.Select(
"${pageContext.request.contextPath}/qxxx/qxxxCasadeMenuAjaxAction.do?action=getYearBysatellite", {
source: "seltime",
preFunction: initProgress,
target: "selYear",
parameters: "seltime={seltime},imgTyp={imgTyp},mode=1",
parser: new ResponseXmlParser(),
postFunction: resetProgress,
errorFunction: reportError
});
*/
new AjaxJspTag.Select(
"${pageContext.request.contextPath}/qxxx/qxxxCasadeMenuAjaxAction.do?action=getWeatherProcess", {
source: "seltime",
preFunction: initProgress,
target: "selYearPic",
parameters: "seltime={seltime},imgTyp={imgTyp},selYear={selYear},selMonth={selMonth},selTypes={selTypes},mode=2",
parser: new ResponseXmlParser(),
postFunction: resetProgress,
errorFunction: reportError
});

new AjaxJspTag.Select(
"${pageContext.request.contextPath}/qxxx/qxxxCasadeMenuAjaxAction.do?action=getWeatherProcess", {
source: "selYear",
preFunction: initProgress,
target: "selYearPic",
parameters: "seltime={seltime},imgTyp={imgTyp},selYear={selYear},selMonth={selMonth},selTypes={selTypes},mode=2",
parser: new ResponseXmlParser(),
postFunction: loadseltimepic,
errorFunction: reportError
});

/*
new AjaxJspTag.Select(
"${pageContext.request.contextPath}/qxxx/qxxxCasadeMenuAjaxAction.do?action=selectHistSnpc", {
source: "selYear",
preFunction: initProgress,
target: "drpPicture",
parameters: "seltime={seltime},imgTyp={imgTyp},selYear={selYear},selMonth={selMonth},selTypes={selTypes},selYearPic={selYearPic},mode=2",
parser: new ResponseXmlParser(),
postFunction: resetProgress,
errorFunction: reportError
});
*/

new AjaxJspTag.Select(
"${pageContext.request.contextPath}/qxxx/qxxxCasadeMenuAjaxAction.do?action=getWeatherProcess", {
source: "selMonth",
preFunction: initProgress,
target: "selYearPic",
parameters: "seltime={seltime},imgTyp={imgTyp},selYear={selYear},selMonth={selMonth},selTypes={selTypes},mode=2",
parser: new ResponseXmlParser(),
postFunction: loadseltimepic,
errorFunction: reportError
});

/*
new AjaxJspTag.Select(
"${pageContext.request.contextPath}/qxxx/qxxxCasadeMenuAjaxAction.do?action=selectHistSnpc", {
source: "selMonth",
preFunction: initProgress,
target: "drpPicture",
parameters: "seltime={seltime},imgTyp={imgTyp},selYear={selYear},selMonth={selMonth},selTypes={selTypes},selYearPic={selYearPic},mode=2",
parser: new ResponseXmlParser(),
postFunction: resetProgress,
errorFunction: reportError
});
*/

new AjaxJspTag.Select(
"${pageContext.request.contextPath}/qxxx/qxxxCasadeMenuAjaxAction.do?action=getWeatherProcess", {
source: "selTypes",
preFunction: initProgress,
target: "selYearPic",
parameters: "seltime={seltime},imgTyp={imgTyp},selYear={selYear},selMonth={selMonth},selTypes={selTypes},mode=2",
parser: new ResponseXmlParser(),
postFunction: loadseltimepic,
errorFunction: reportError
});
/*
new AjaxJspTag.Select(
"${pageContext.request.contextPath}/qxxx/qxxxCasadeMenuAjaxAction.do?action=selectHistSnpc", {
source: "selTypes",
preFunction: initProgress,
target: "drpPicture",
parameters: "seltime={seltime},imgTyp={imgTyp},selYear={selYear},selMonth={selMonth},selTypes={selTypes},selYearPic={selYearPic},mode=2",
parser: new ResponseXmlParser(),
postFunction: resetProgress,
errorFunction: reportError
});
*/
new AjaxJspTag.Select(
"${pageContext.request.contextPath}/qxxx/qxxxCasadeMenuAjaxAction.do?action=selectHistSnpc", {
source: "selYearPic",
preFunction: initProgress,
target: "drpPicture",
parameters: "seltime={seltime},imgTyp={imgTyp},selYear={selYear},selMonth={selMonth},selTypes={selTypes},selYearPic={selYearPic},mode=3",
parser: new ResponseXmlParser(),
postFunction: resetProgress,
errorFunction: reportError
});
</c:when>
<c:otherwise>
$('seltime').fireEvent("onchange");
new AjaxJspTag.Select(
"${pageContext.request.contextPath}/qxxx/qxxxCasadeMenuAjaxAction.do?action=selectSnph", {
source: "seltime",
preFunction: initProgress,
target: "drpPicture",
parameters: "seltime={seltime},imgTyp={imgTyp},selYear=${param.outeryear},selMonth=${param.outermonth},selTypes=${param.outerctyp},selectpic={selectpic},selYearPic=${param.outercno},mode=2",
parser: new ResponseXmlParser(),
postFunction: resetProgress,
errorFunction: reportError
});
</c:otherwise>
</c:choose>
$('imgTyp').value=2019;
</script>
</body>
</html>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章