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