Question

我使用primefaces及其扩展程序（包括时间轴）来处理项目。

它不支持在此固定标题（但我相信他们计划实施它）所以我自己做了。

在我的网站上我有2个相关的时间表，我面临的唯一问题是：

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

当我更改视口（将其拖放到左/右或放大/缩小）时，标题上的次要/主要标签不会被隐藏，它们仍会显示，直到完整的一天不再可见

我尝试用一些z-index来解决这个问题，但还没有运气。

提前感谢，

麦克

Answer 1

好吧......你去了

不适用于ie，仅适用于pf5.1＆amp; 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

我审查了这些名字，但你可以看到我向下滚动到标题并且标题保持不变

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

Primefaces：具有固定标题的时间轴

1 个答案: