Jsf 如果所选选项卡在初始tabview加载时隐藏在p:tabview中,则滚动至所选选项卡
假设Jsf 如果所选选项卡在初始tabview加载时隐藏在p:tabview中,则滚动至所选选项卡,jsf,jsf-2,primefaces,tabs,tabview,Jsf,Jsf 2,Primefaces,Tabs,Tabview,假设p:tabview中有许多选项卡,并显示滚动以导航到所有选项卡 如果显示内容的活动选项卡是最右边的选项卡,则用户在初始p:tabviewload时看不到该选项卡。如果我们使用滚动按钮导航到最右边,那么我们可以看到高亮显示的活动选项卡,表明它是选中的选项卡 如何在加载时滚动到活动选项卡,以便用户能够始终看到所选选项卡。这可以通过以下方式完成:覆盖primefacesp:tabview组件JavaScript文件(即tabview.js文件)中的initScrolling方法 initScr
p:tabview
中有许多选项卡,并显示滚动以导航到所有选项卡
如果显示内容的活动选项卡是最右边的选项卡,则用户在初始p:tabview
load时看不到该选项卡。如果我们使用滚动按钮导航到最右边,那么我们可以看到高亮显示的活动选项卡,表明它是选中的选项卡
如何在加载时滚动到活动选项卡,以便用户能够始终看到所选选项卡。这可以通过以下方式完成:覆盖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版本中完成的,更多或更少的更改也将是相同的更高版本