2

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

然而，我的问题更复杂，因为当调整一个控制元素的大小时，我需要一个容器内的多个 div 来反向调整大小。

控制元素从容器的不同高度开始，因此反向调整大小的元素不能相同地调整大小。

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

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

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

4

1 回答 1

0

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

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

如果您需要更多详细信息，您可以深入研究完整的代码，但我已经精简到您在这个 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 最新版本。

于 2014-05-16T20:09:47.373 回答