如何使用p:blockUI和p:tabView

时间:2012-10-16 10:48:41

标签: jsf jsf-2 primefaces

我想创建带有进度条的标签。像这样:

<p:tabView id="tabs" dynamic="true" cache="false">
    <p:tab id="tab1" title="tab1" >
        <ui:include src="tab1.xhtml" />
    </p:tab>
    <p:tab id="tab2" title="tab2" >
        <ui:include src="tab2.xhtml" />
    </p:tab>

    <p:blockUI block="tabs" trigger="tabs">  
        LOADING
    </p:blockUI>  
</p:tabView>

但它不起作用。你能帮我纠正我的错误吗?

2 个答案:

答案 0 :(得分:3)

试试这个:

<p:tabView id="tabs">

  <p:ajax event="tabChange" onstart="BUI.show()" oncomplete="BUI.hide()" />

  <p:tab id="tab1" title="tab1">
    <h:outputtext value="TAB 1" />
  </p:tab>

  <p:tab id="tab2" title="tab2">
    <h:outputtext value="TAB 2" />
  </p:tab>

</p:tabView>

<p:blockUI widgetVar="BUI" block="tabs">
  LOADING
</p:blockUI>

答案 1 :(得分:0)

以下代码适用于我(Primefaces 5.2)

<p:blockUI block="tabs" widgetVar="tabsBlocker">  
    LOADING
</p:blockUI>  

<p:tabView id="tabs" dynamic="true" cache="false" 
    onTabChange="PF('tabsBlocker').show()" 
    onTabShow="PF('tabsBlocker').hide()">

  <p:tab id="tab1" title="tab1" >
      <ui:include src="tab1.xhtml" />
  </p:tab>

  <p:tab id="tab2" title="tab2" >
      <ui:include src="tab2.xhtml" />
  </p:tab>

</p:tabView>