容器内多个 div 的 JQuery UI 垂直调整大小和反向调整大小

Question

我正在开发一个 jQuery UI 工具，该工具使用此处记录的自定义alsoResizeRerverse 函数： jQuery UI Resizable alsoResize reverse

但是我的问题更复杂，因为我需要一个容器中的多个 div 来在调整一个控件元素的大小时反向调整大小。

控件元素以容器的不同高度开始，因此反向调整大小的元素不能等量调整大小。

例如元素 1 开始为 10%，然后调整为 50%。 因此，元素 2 和 3 以 90% 的组合值开始，并且在完成时必须总计为 50%。 但是元素 2 和 3 的初始值分别为 25% 和 65%，这意味着它们不能通过元素 1 的 delta 值除以 2 来调整大小。

此外，在这 3 个父元素中还有多个子元素，它们也必须在其父元素中调整大小和反向调整大小。

元素的目的是允许用户设置不同类别的百分比值，然后用于显示图表。

Answer 1

我使用jQuery UI Resizable 并编写了自定义函数来处理三个可调整大小的元素及其子元素。

由于使用了边框和边距来创建白色边框，我的解决方案也必须解决这个问题。只处理没有边界的元素要简单得多。我还必须计算零高度元素并调整它们的大小以使它们可见，同时仍然保留零值，因为它们的百分比用于计算。

如果您需要更多详细信息，您可以深入了解完整代码，但我已精简至 just the essentials you will need for your problem on this jsfiddle。

jQuery 代码如下，使用我原来的选择器 - 在示例中它会有意义，其中包含必要的 CSS 和标记结构。

$('#act .weighting-category').resizable({
    minHeight: 0,       
    handles: 's',
    start: function(event, ui) {                        

        orig_height = $(this).height();

        actheight1 = $('#activity').height();

        basic_o_percent = $('#act .basic').height() / (actheight1-$(this).height());
        class_o_percent = $('#act .classifications').height() / (actheight1-$(this).height());
        related_o_percent = $('#act .related').height() / (actheight1-$(this).height());
        financial_o_percent = $('#act .financial').height() / (actheight1-$(this).height());
        performance_o_percent = $('#act .performance').height() / (actheight1-$(this).height());

    },
    resize: function(event, ui) {

        if($(this).hasClass('zero') && $(this).height() > 5){
            $(this).removeClass('zero');
        }
        if(!$(this).hasClass('zero')){

            if($(this).height() > orig_height  || orig_height < (actheight1)) {

                if($(this).attr('id')=='basic'){
                    $("#act .classifications").height( (actheight1  -$(this).height()) * class_o_percent);
                    $("#act .financial").height( (actheight1  -$(this).height()) * financial_o_percent);
                    $("#act .related").height( (actheight1  -$(this).height()) * related_o_percent);
                    $("#act .performance").height( (actheight1  -$(this).height()) * performance_o_percent);
                } else if( $(this).attr('id')=='classifications'){
                    $("#act .basic").height( (actheight1  -$(this).height()) * basic_o_percent);
                    $("#act .financial").height( (actheight1 -$(this).height()) * financial_o_percent);
                    $("#act .related").height( (actheight1  -$(this).height()) * related_o_percent);
                    $("#act .performance").height( (actheight1 -$(this).height()) * performance_o_percent);
                } else if( $(this).attr('id')=='financial'){
                    $("#act .classifications").height( (actheight1  -$(this).height()) * class_o_percent);
                    $("#act .basic").height( (actheight1 -$(this).height()) * basic_o_percent);
                    $("#act .related").height( (actheight1 -$(this).height()) * related_o_percent);
                    $("#act .performance").height( (actheight1 -$(this).height()) * performance_o_percent);
                } else if( $(this).attr('id')=='related'){
                    $("#act .classifications").height( (actheight1  -$(this).height()) * class_o_percent);
                    $("#act .financial").height( (actheight1 -$(this).height()) * financial_o_percent);
                    $("#act .basic").height( (actheight1  -$(this).height()) * basic_o_percent);
                    $("#act .performance").height( (actheight1 -$(this).height()) * performance_o_percent);
                } else if( $(this).attr('id')=='performance'){
                    $("#act .classifications").height( (actheight1  -$(this).height()) * class_o_percent);
                    $("#act .financial").height( (actheight1  -$(this).height()) * financial_o_percent);
                    $("#act .related").height( (actheight1 -$(this).height() ) * related_o_percent);
                    $("#act .basic").height( (actheight1  -$(this).height()) * basic_o_percent);
                }

            } else {


                targetheight = $(this).height();
                $('#act .weighting-category').not(this).each(function(){
                    $(this).height( (actheight2 - targetheight ) * 0.25);
                    if($(this).hasClass('zero') && $(this).height() > 0){
                        $(this).removeClass('zero');
                    }
                })                  
            }
        }




    },
    stop: function(event, ui) { 
        if($(this).height() == 0){
            $(this).addClass('zero');
        }
        totalheight = 0;
        $('#act > .weighting-category').each(function() {
            if(!$(this).hasClass('zero'))
            {
                totalheight += $(this).height();
            }
        });                                         

        actheight = 0;  
        $('#act .weighting-category').each(function(){              
            if(!$(this).hasClass('zero')){
                actheight += $(this).height();
            }
        })  

        actheight = 0;  
        $('#act .weighting-category').each(function(){              
            if(!$(this).hasClass('zero')){
                actheight += $(this).height();
            }
            if($(this).height() == 0 || $(this).hasClass('zero')){
                $(this).addClass('zero');

            }
        })  


        if($(this).height() >= actheight1)
        {
            $(this).animate({
                   height: (actheight1),
                 }, 500, function() {
            });
        }   


        $('#act .weighting-category').each(function(){
            if(!$(this).hasClass('zero')){
                thispercentage = $(this).height() / actheight;
                $(this).animate({
                       height: (maxheight * thispercentage),
                     }, 500, function() {
                });
            }               
        })                      

    }
});

告诉我进展如何。

[编辑]：目前这在 IE 11 上不起作用，但是我原来的解决方案可以。它可能只需要对 IE 进行一些故障排除，但适用于 Chrome 和 Firefox 最新版本。