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>