Пролистайте выбранную вкладку, если выбранная вкладка скрыта в p: tabview при начальной загрузке табуляции.

Question

Предположим, что в есть много вкладок, и прокрутка показывается для перехода на все вкладки.

Если активная вкладка, содержимое которой отображается, является самой правой вкладкой, то она не видна пользователю при начальной загрузке p:tabview. Если мы перейдем вправо, используя кнопку прокрутки, мы увидим, что активная вкладка подсвечена, указывая на выбранную вкладку.

Как прокрутить до активной вкладки при загрузке, чтобы пользователь мог видеть выбранную вкладку всегда.

Answer 1

Это можно сделать следующим образом путем переопределения метода initScrolling в файлах p:tabview компонентного файла 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 с измененным выше способом.

Это сделано в версии 4.0, больше или меньше, и изменения будут такими же более высокими версиями.