WebWork2.2新特性(九) AJAX之Tabbed Panels(选项卡)

WebWork2.2新特性(九) AJAX之Tabbed Panels(选项卡)

Tabbed Panels(选项卡)是一个具有多个选项页面的控件.在应用程序中很常见.

在WebWork中,还有另外一个tabbedPane,和这个类似,不过它的使用方法和本控件不同,具体可以参考以前版本中的TabbedPaneTest.action例子.

首先,我们把wiki文档翻译一下:

此面板组件允许你有一个选项卡面板,每个选项页可以拥有本地的内容或者远程的内容(用户每次选择这个选项页都会刷新内容).

属性 - ww:tabbedPanel

名称	描述
id (required)	组件标识

属性 - ww:panel

名称	描述
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");
// "white" 要替换为你的背景色
    });
</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