Tabbed Panels(選項卡)是一個具有多個選項頁面的控件.在應用程序中很常見.
在WebWork中,還有另外一個tabbedPane,和這個類似,不過它的使用方法和本控件不同,具體可以參考以前版本中的TabbedPaneTest.action例子.
首先,我們把wiki文檔翻譯一下:
此面板組件允許你有一個選項卡面板,每個選項頁可以擁有本地的內容或者遠程的內容(用戶每次選擇這個選項頁都會刷新內容).
| 名稱 | 描述 |
| id (required) |
標識ID |
| tabName (required) |
選項文字,顯示在選項頁列表的頭部 |
| href (required if remote panel) |
用來獲取內容的網址 |
| remote |
true/false - 用來確定這是一個遠程面板(ajax)還是一個本地面板 (內容會裝入可視或隱藏的容器) |
| loadingText |
新的遠程內容被獲取之前顯示的文字 |
| reloadingText |
裝載內容時對用戶顯示的文字,特別是取內容的時候要花費很長的時間 (僅對遠程面板可用) |
| errorText |
如果取內容時發生了錯誤,向用戶顯示的提示 (僅對遠程面板可用) |
| showErrorTransportText |
true/false - 當獲取內容有問題的時候,是否把錯誤信息當作內容顯示(僅對遠程面板可用) |
| listenTopics |
監聽的Topic名稱(多個逗號分割),將會導致此面板重新獲取內容 |
額外的配置
如果你在尋找"好看"的圓角效果, 這里有一個可用的配置. 這里假設選項卡的背景色是白色.如果你使用了不同的顏色,請修改 Rounded() 方法的參數.
<link rel="stylesheet" type="text/css" href="<ww:url value="/webwork/tabs.css"/>">
<link rel="stylesheet" type="text/css" href="<ww:url value="/webwork/niftycorners/niftyCorners.css"/>">
<link rel="stylesheet" type="text/css" href="<ww:url value="/webwork/niftycorners/niftyPrint.css"/>" media="print">
<script type="text/javascript" src="<ww:url value="/webwork/niftycorners/nifty.js"/>"></script>
<script type="text/javascript">
dojo.event.connect(window, "onload", function() {
if (!NiftyCheck())
return;
Rounded("li.tab_selected", "top", "white", "transparent", "border #ffffffS");
Rounded("li.tab_unselected", "top", "white", "transparent", "border #ffffffS");
});
</script>
我們首先來分析一個例子,
<ww:tabbedPanel id="test" theme="ajax">
<ww:panel id="one" tabName="one" theme="ajax">
This is the first pane<br/>
<ww:form>
<ww:textfield name="tt" label="Test Text"/> <br/>
<ww:textfield name="tt2" label="Test Text2"/>
</ww:form>
</ww:panel>
<ww:panel id="two" tabName="two" theme="ajax">
This is the second panel
</ww:panel>
</ww:tabbedPanel> |
這個選項卡包含了2個選項頁面,都是本地頁面,使用ww:panel來定義頁面內容,使用的模板都是ajax模板.
我們再來看如何定義遠程頁面:
<ww:tabbedPanel id="test2" theme="simple" >
<ww:panel id="left" tabName="left" theme="ajax">
This is the left pane<br/>
<ww:form >
<ww:textfield name="tt" label="Test Text" /> <br/>
<ww:textfield name="tt2" label="Test Text2" />
</ww:form>
</ww:panel>
<ww:panel remote="true" href="/AjaxTest.action" id="ryh1" theme="ajax" tabName="remote one" />
<ww:panel id="middle" tabName="middle" theme="ajax">
middle tab<br/>
<ww:form >
<ww:textfield name="tt" label="Test Text44" /> <br/>
<ww:textfield name="tt2" label="Test Text442" />
</ww:form>
</ww:panel>
<ww:panel remote="true" href="/AjaxTest.action" id="ryh21" theme="ajax" tabName="remote right" />
</ww:tabbedPanel> |
可以看到定義了四個選項頁面,其中有2個是遠程頁面.
每次切換頁面時,相應"遠程頁面"的內容都會刷新,本地頁面是不刷新的.
同時遠程頁面也可以監聽Topic,具體使用可以參考Remote A或者使用JavaScript進行調用.(注:beta1里面的相關程序有一些錯誤)
除經特別注明外,本文章版權歸JScud Develop團隊或其原作者所有.
轉載請注明作者和來源. scud(飛云小俠) 歡迎訪問 JScud Develop