Remote Div Tag
wiki上的文档翻译:
Remote DIV 标签和普通的Html的DIV标签工作方式是一样的,但是它可以通过标签内指定的一个网址来装载它的内容.
属性
| 名称 |
描述 |
| id (必有): |
DIV的ID |
| href (必有): |
用来获取内容的网址 |
| delay: |
第一次装载内容需要延迟多长时间 (毫秒) |
| updateFreq: |
多长时间重新取一次内容 (毫秒) |
| loadingText: |
装载内容中对用户显示的文字 (特别是取内容的时候要花费很长的时间 |
| errorText: |
如果取内容时发生了错误,向用户显示的提示 |
| showErrorTransportText: true/false |
当获取内容有问题的时候,是否把错误信息当作内容显示 |
| listenTopics: |
监听的Topic名称(多个逗号分割), 将会导致此DIV重新获取内容 |
| afterLoading: |
获取内容后要执行的Javascript代码 |
其他功能
使用javascript代码我们还可以刷新内容,停止或者开始刷新组件.例如一个id是"remotediv1"的div组件:
开始刷新的javascript代码: remotediv1.start();
停止刷新的javascript代码remotediv1.stop();
刷新内容的javascript代码:remotediv1.bind();
Remote DIV标签
最值得关注的特性:
可以自己重新装载自己的内容
可以监听Topic,也就是别的动作可以引发更新内容的行为
JavaScript代码可以控制它的行为
来看Remote Div标签的最简单的一个例子example1.jsp:
1 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
2 <%@ taglib prefix="ww" uri="/webwork" %>
3 <html>
4 <head>
5 <title>Ajax Examples</title>
6 <jsp:include page="../commonInclude.jsp"/>
7 </head>
8 <body>
9 <ww:div id="once" theme="ajax" cssStyle="border: 1px solid yellow;"
10 href="/AjaxTest.action" delay="5000" loadingText="loading
">Initial Content</ww:div>
11 </body></html>
12
这个文件,内容非常简单,使用了一个ww:div标签,设置了一个id,使用的是ajax这个模板(如果你想定义自己的模板,请务必参考ajax模板的编写方法),设置读取内容的url为"/AjaxTest.action",设置延迟5000毫秒后读取内容,装载内容时显示的文本设置为"loading...",div显示时的初始内容时"Initial Content".
很简单,在打开网页5秒后,标签会自动去访问"/AjaxTest.action",并把获取的内容设置为Div的内容.
再来看一个
定时自动刷新的例子:
<ww:div id="twoseconds" cssStyle="border: 1px solid yellow;" href="/AjaxTest.action"
theme="ajax" delay="2000" updateFreq="3000" errorText="There was an error">Initial Content</ww:div>
这个标签产生的结果每3秒钟刷新一次DIV的内容,和上面的差不多,只是多了一个
updateFreq设置.
此标签还有一个
afterLoading属性,使用方法如下:
<ww:div ...... afterLoading='alert("done")'>Initial Content</ww:div>
<ww:div ...... afterLoading="alert(\"done\")">Initial Content</ww:div>