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

Question

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

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

控制元素开始时容器的高度不同，因此反向调整大小的元素无法同等地调整大小。

例如，元素 1 开始时为 10%，后来调整为 50%。因此，元素 2 和元素 3 开始时的总值(value)为 90%，结束时总值(value)必须达到 50%。但元素 2 和 3 的初始值为 25% 和 65%，这意味着它们无法通过元素 1 的增量值除以 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 最新版本。