在客戶端實現可能很簡單.你可以包裝JSP頁面(或者你想要隱藏的一部分)到一個div中,然后你可以添加更多div,當用戶點擊提交按鈕時這些div出現.這些div可以包含gif動畫和其他內容.
場景:當用戶點擊按鈕,調用JS函數,該函數隱藏頁面并且顯示"請等待..."div.你可以使用CSS來自定義外觀:
下面是一個正常工作的例子:
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<f:loadBundle basename="demo.bundle.Messages" var="Message"/>
<html>
<head>
<title>Input Name Page</title>
<script>
function gowait() {
document.getElementById("main").style.visibility="hidden";
document.getElementById("wait").style.visibility="visible";
}
</script>
</head>
<body bgcolor="white">
<f:view>
<div id="main">
<h1><h:outputText value="#{Message.inputname_header}"/></h1>
<h:messages style="color: red"/>
<h:form id="helloForm">
<h:outputText value="#{Message.prompt}"/>
<h:inputText id="userName" value="#{GetNameBean.userName}" required="true">
<f:validateLength minimum="2" maximum="20"/>
</h:inputText>
<h:commandButton onclick="gowait()" id="submit"
action="#{GetNameBean.action}" value="Say Hello" />
</h:form>
</div>
<div id="wait" style="visibility:hidden; position: absolute; top: 0; left: 0">
<table width="100%" height ="300px">
<tr>
<td align="center" valign="middle">
<h2>Please, wait...</h2>
</td>
</tr>
</table>
</div>
</f:view>
</body>
</html>
如果你想有一個動畫gif圖片在"請等待..."中,當表單提交后該圖片應該從新加載.因此,再一次指定圖片的id,并且添加經過一段時間延時后重新加載的代碼.下面是個例子:
<script>
function gowait() {
document.getElementById("main").style.visibility="hidden";
document.getElementById("wait").style.visibility="visible";
window.setTimeout('showProgress()', 500);
}
function showProgress(){
var wg = document.getElementById("waitgif");
wg.src=wg.src;
}
</script>
....
....
....
<img id="waitgif" src="animated.gif">