Primefaces：固定 header 的时间轴

Question

我正在使用 primefaces 及其扩展（包括时间线）进行项目。

不支持对此进行固定 header（但是，我相信他们计划实施它）所以我自己做了。

在我的网站上，我有 2 个链接的时间线，我面临的唯一问题是：

http://s14.postimg.org/f9rhpkn1d/problem.png

当我更改视口（将其拖放到 left/right 或缩放 in/out 时），header 上的 minor/major 标签不会被隐藏，它们仍然显示到完整的一天不再可见

我尝试用一些 z-index 东西解决这个问题，但还没有成功。

提前致谢，

麦克

Answer 1

好吧...给你

不适用于 ie，仅适用于 pf5.1&extensions3.2.0

我的 2 个时间线有 ids timelineWeekly 和 timelineWeeklyBlocked，我把它们放在最大高度为 450 的本机滚动面板中

代码：

<h:outputScript id="connectTimelinesFixed" target="body"
            unescape="true" rendered="#{!weekTimelineController.isIE}">
//<![CDATA[
$(function() {
    onrangechange2();
});
function onrangechange1() {  
    var range = PF('timelineOneWdgt').getVisibleRange();  
    PF('timelineTwoWdgt').setVisibleRange(range.start, range.end);
    var minorFirst = jQuery($(".timeline-selectable > div:nth-child(1) > div:nth-child(1) > div:nth-child(19)"));
    var minorSecond = jQuery($("#timelineWeeklyBlocked > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(19)"));
    var majorFirst = jQuery($(".timeline-selectable > div:nth-child(1) > div:nth-child(1) > div:nth-child(6)"));
    var majorSecond = jQuery($("#timelineWeeklyBlocked > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(6)"));
    var offsetRightMinor = ($(window).width() - (minorFirst.offset().left + minorFirst.outerWidth()));
    var offsetRightMajor = ($(window).width() - (majorFirst.offset().left + majorFirst.outerWidth()));
    var factorMinor = Math.round($(window).width()/offsetRightMinor).toFixed(1);
    var factorMajor = Math.round($(window).width()/offsetRightMajor).toFixed(1);
    console.log(factorMajor);
    if(factorMinor==12){
    minorFirst.css({'visibility' : 'hidden'});
    minorSecond.css({'visibility' : 'hidden'});
    } else if(factorMinor<12){
        minorFirst.css({'visibility' : 'visible'});
        minorSecond.css({'visibility' : 'visible'});
    }
    if(factorMajor==12){
        majorFirst.css({'visibility' : 'hidden'});
        majorSecond.css({'visibility' : 'hidden'});
    } else if(factorMajor==11||factorMajor==10){
        majorFirst.css({'visibility' : 'visible'});
        majorSecond.css({'visibility' : 'visible'});
    }
}  

function onrangechange2() {  
    var range = PF('timelineTwoWdgt').getVisibleRange();  
    PF('timelineOneWdgt').setVisibleRange(range.start, range.end);
    var minorFirst = jQuery($(".timeline-selectable > div:nth-child(1) > div:nth-child(1) > div:nth-child(19)"));
    var minorSecond = jQuery($("#timelineWeeklyBlocked > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(19)"));
    var majorFirst = jQuery($(".timeline-selectable > div:nth-child(1) > div:nth-child(1) > div:nth-child(6)"));
    var majorSecond = jQuery($("#timelineWeeklyBlocked > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(6)"));
    var offsetRightMinor = ($(window).width() - (minorSecond.offset().left + minorSecond.outerWidth()));
    var offsetRightMajor = ($(window).width() - (majorSecond.offset().left + majorSecond.outerWidth()));
    var factorMinor = Math.round($(window).width()/offsetRightMinor).toFixed(1);
    var factorMajor = Math.round($(window).width()/offsetRightMajor).toFixed(1);
    console.log(factorMajor);
    if(factorMinor==12){
    minorFirst.css({'visibility' : 'hidden'});
    minorSecond.css({'visibility' : 'hidden'});
    } else if(factorMinor<12){
        minorFirst.css({'visibility' : 'visible'});
        minorSecond.css({'visibility' : 'visible'});
    }
    if(factorMajor==12){
        majorFirst.css({'visibility' : 'hidden'});
        majorSecond.css({'visibility' : 'hidden'});
    } else if(factorMajor==11||factorMajor==9){
        majorFirst.css({'visibility' : 'visible'});
        majorSecond.css({'visibility' : 'visible'});
    }
}//]]>
        </h:outputScript>
        <h:outputScript id="JS" target="body" unescape="true"
            rendered="#{!weekTimelineController.isIE}">
//<![CDATA[
jQuery(function($) {
var oldWidth = $(window).width();
var $cache = jQuery(".timeline-selectable > div:nth-child(1) > div:nth-child(1)");
var $cache2 = jQuery("#timelineWeeklyBlocked > div:nth-child(1) > div:nth-child(1) > div:nth-child(1)");
var top = 168;
var top2 = 635;
if(${weekTimelineController.browserCompatibility})
    top = 164,
    top2 = 630;
  function fixDiv() {
    var scroll = $(window).scrollTop();
    var viewportWidth = $(window).width();
    var factor = oldWidth/viewportWidth;
    if(scroll > top)
      $cache.css({
        'top': '-'+(scroll-top)+"px",
        'margin-top': ''
      });
    else
      $cache.css({
        'position': 'fixed',
        'top': '-'+(scroll)+"px",
        'margin-top': top+'px',
        'z-index' : '1',
        'left': '*1.27'
      });
    if(scroll > top2)
      $cache2.css({
        'top': '-'+(scroll-top2)+"px",
        'margin-top': ''
      });
    else
      $cache2.css({
        'position': 'fixed',
        'top': '-'+(scroll)+"px",
        'margin-top': top2+'px',
        'z-index' : '1',
        'left': '*1.27'
      });
  }
  $(window).scroll(fixDiv);
  $(window).resize(function() {
    var viewportWidth = $(window).width();
    var factor = oldWidth/viewportWidth;
    $cache.css({
        'left': '*'+factor*1.28
      }),
    $cache2.css({
        'left': '*'+factor*1.28
      });
});
  fixDiv();
});
//]]>
        </h:outputScript>
        <!-- css classes to set the height of the horizontal lines when header is fixed -->
        <h:outputStylesheet rendered="#{!weekTimelineController.isIE}">
#page {
    min-width: 800px !important;
}
div.timeline-axis-grid-minor {
    height: 428px !important;
}
div.timeline-axis-grid-major{
    height: 450px !important;
}
        </h:outputStylesheet>

看起来像这样：

http://s1.postimg.org/spfdd2bq7/image.png

我审查了名字，但你可以看到我向下滚动到底部并且 header 保持不变

我知道它不是特别优雅，但这是一个要求，我知道还有其他人想要这个...

Primefaces：固定 header 的时间轴

Primefaces: Timeline with fixed header

jsf

timeline

primefaces

primefaces-extensions