笔者在最近的项目中采用的是Jsf(myfaces+richfaces+Ajax4Jsf)+Spring+Hibernate技术,由于数据量大,系统反应时间为1.5~2秒,此时需要有提示的标记比如"正在理..."等。Ajax4Jsf中的"onsubmit"为提交表单时发生的动作,"oncomplete"为提交到服务器端处理完返回到客户端时执行的动作,这两者的时间差就是我们等待的时间。我们也就是要在这个时间段内显示标记。对于<t:commandButton/>或<t:commandLink /> 等可以用"onclick""ondblclick"等与"oncomplete"组合灵活应用。以下是简例片段:
运行时的显示效果:
其实Ajax4Jsf也有对此效果的支持:
1
<!--
执行的js方法
-->
2![](http://www.blogjava.net/Images/OutliningIndicators/ExpandedBlockStart.gif)
<
script
type
="text/javascript"
>
3![](https://i-blog.csdnimg.cn/blog_migrate/97e794c86028c5f5b5461ae5ef440a4c.gif)
function beforeChange()
{
4
var obj = document.getElementById('myForm:waitingGif');
5
obj.style.display='block';
6
}
7![](https://i-blog.csdnimg.cn/blog_migrate/97e794c86028c5f5b5461ae5ef440a4c.gif)
function afterChange()
{
8
var obj = document.getElementById('myForm:waitingGif');
9
obj.style.display='none';
10
}
11
</
script
>
12
<!--
应用
-->
13
<
t:panelGrid
columns
="3"
id
="listGrid"
forceId
="true"
>
14
<
t:selectOneRadio
value
="#{myBean.selectItem}"
>
15
<
a4j:support
event
="onclick"
16
actionListener
="#{myBean.selectItemChange}"
17
reRender
="listGrid"
onsubmit
="beforeChange()"
18
oncomplete
="afterChange()"
/>
19
<
f:selectItem
itemLabel
="上月"
itemValue
="4"
/>
20
<
f:selectItem
itemLabel
="本月"
itemValue
="3"
/>
21
<
f:selectItem
itemLabel
="上周"
itemValue
="2"
/>
22
<
f:selectItem
itemLabel
="本周"
itemValue
="1"
/>
23
</
t:selectOneRadio
>
24
<
h:graphicImage
id
="waitingGif"
value
="/images/waiting.gif"
style
="display:none"
/>
25
</
t:panelGrid
>
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
2
![](http://www.blogjava.net/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/ca75c07623e1b494fee67e8f316fc310.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/9b8a8a44dd1c74ae49c20a7cd451974e.gif)
3
![](https://i-blog.csdnimg.cn/blog_migrate/97e794c86028c5f5b5461ae5ef440a4c.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3c6cafce68eb941a00f1998f1d3d3aa6.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/9b8a8a44dd1c74ae49c20a7cd451974e.gif)
4
![](https://i-blog.csdnimg.cn/blog_migrate/d18c02628675d0a2c816449d98bda930.gif)
5
![](https://i-blog.csdnimg.cn/blog_migrate/d18c02628675d0a2c816449d98bda930.gif)
6
![](https://i-blog.csdnimg.cn/blog_migrate/ecedf933ec37d714bd4c2545da43add2.gif)
7
![](https://i-blog.csdnimg.cn/blog_migrate/97e794c86028c5f5b5461ae5ef440a4c.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3c6cafce68eb941a00f1998f1d3d3aa6.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/9b8a8a44dd1c74ae49c20a7cd451974e.gif)
8
![](https://i-blog.csdnimg.cn/blog_migrate/d18c02628675d0a2c816449d98bda930.gif)
9
![](https://i-blog.csdnimg.cn/blog_migrate/d18c02628675d0a2c816449d98bda930.gif)
10
![](https://i-blog.csdnimg.cn/blog_migrate/8f1ba5b45633e9678d1db480c16cae3f.gif)
11
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
12
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
13
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
14
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
15
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
16
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
17
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
18
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
19
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
20
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
21
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
22
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
23
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
24
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
25
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
运行时的显示效果:
![](https://i-blog.csdnimg.cn/blog_migrate/49effee9e3d5b817500c477b0b0ee71a.jpeg)
其实Ajax4Jsf也有对此效果的支持:
1
<
a4j:status
startText
="正在处理
"
startStyle
="font-size: 10pt;color:red;"
/>
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/9b8a8a44dd1c74ae49c20a7cd451974e.gif)
来源:http://www.blogjava.net/jakin/archive/2008/01/15/175523.html