如果选中的选项卡隐藏在p:tabview的最初选项卡视图中,请滚动到所选选项卡加载
问题描述:
假设p:tabview
中有许多选项卡,并且正在显示滚动以导航到所有选项卡。如果选中的选项卡隐藏在p:tabview的最初选项卡视图中,请滚动到所选选项卡加载
如果显示其内容的活动选项卡是最右边的选项卡,则在初始加载时它对用户不可见。如果我们使用滚动按钮导航到最右侧,那么我们可以看到突出显示的活动选项卡,指示它是选中选项卡。
如何在加载时滚动到活动选项卡,以便用户始终可以看到选定选项卡。
答
这可以通过覆盖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版本中完成的,更多或更少的更改将会与更高版本相同。