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的最新版本。

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

1 个答案: