如果所选选项卡在初始选项卡视图加载时隐藏在 p:tabview 中，则滚动到所选选项卡

Question

假设p:tabview 中有许多选项卡，并且显示滚动以导航到所有选项卡。

如果显示内容的活动选项卡是最右边的选项卡，则用户在初始p:tabview 加载时看不到它。如果我们使用滚动按钮导航到最右边，那么我们可以看到活动选项卡突出显示，表明它是选中的选项卡。

如何在加载时滚动到活动选项卡，以便用户始终能够看到选定的选项卡。

Answer 1

这可以通过以下方式通过覆盖 primefaces p:tabview 组件 JavaScript 文件（即 tabview.js 文件）中的 initScrolling 方法来完成。

  initScrolling: function() {
      if(this.jq.is(':visible')) {
          var overflown = (this.lastTab.position().left - this.firstTab.position().left) >                                               
                           this.navscroller.innerWidth();
          if(overflown) {
            this.navscroller.css('padding-left', '18px');
            this.navcrollerLeft.show();
            this.navcrollerRight.show();

            activeTab = this.navContainer.children('.ui-tabs-selected');
            viewportWidth = this.navscroller.innerWidth();
            activeTabPosition = activeTab.position().left + parseInt(activeTab.innerWidth());

            if(activeTabPosition > viewportWidth) {
              var scrollStep = activeTabPosition - viewportWidth;
              scrollStep = Math.ceil(scrollStep/100) * -100;        
              this.scroll(scrollStep);
            } else {
                   this.restoreScrollState();
            }                 
         }            
        return true;
    }
    else {
        return false;
    }
}   

我希望通过扩展 tabview 组件小部件来覆盖这个单一方法，但它不受支持。所以我们应该有我们自己的 tabview.js 文件，上面修改了上面的方法。

这是在 primefaces 4.0 版本中完成的，或多或少的更改​​也将与更高版本相同。