jsf - 如何将 p:blockUI 与 p:tabView 一起使用

Question

我想创建带有进度条的选项卡。像这样的东西：

<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>

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

Answer 1

尝试这个：

<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>

Answer 2

以下代码对我有用（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>