在客戶端實(shí)現(xiàn)可能很簡單.你可以包裝JSP頁面(或者你想要隱藏的一部分)到一個(gè)div中,然后你可以添加更多div,當(dāng)用戶點(diǎn)擊提交按鈕時(shí)這些div出現(xiàn).這些div可以包含gif動(dòng)畫和其他內(nèi)容.
場景:當(dāng)用戶點(diǎn)擊按鈕,調(diào)用JS函數(shù),該函數(shù)隱藏頁面并且顯示"請等待..."div.你可以使用CSS來自定義外觀:
下面是一個(gè)正常工作的例子:
<%@ 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>
如果你想有一個(gè)動(dòng)畫gif圖片在"請等待..."中,當(dāng)表單提交后該圖片應(yīng)該從新加載.因此,再一次指定圖片的id,并且添加經(jīng)過一段時(shí)間延時(shí)后重新加載的代碼.下面是個(gè)例子:
<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">