如果选中的选项卡隐藏在p：tabview的最初选项卡视图中，请滚动到所选选项卡加载

Question

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

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

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

Answer 1

这可以通过覆盖initScrolling方法中的组件JavaScript文件，即tabview.js文件，通过以下方式完成。

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版本中完成的，更多或更少的更改将会与更高版本相同。