JQuery用戶界面垂直調整大小和反向容器

我正在使用自定義alsoResizeRerverse功能這裏記錄一個jQuery UI工具的工作範圍內多個div的調整： jQuery UI Resizable alsoResize reverse JQuery用戶界面垂直調整大小和反向容器

但我的問題是比較複雜的，我需要多個div在一個容器中調整一個控制元素的大小時反向調整大小。

控制元素始於容器的不同高度，因此反向大小調整的元素無法平均調整大小。

例如，元素1以10％開始，並調整爲50％。元素2和3因此以90％的組合值開始並且在完成時必須總計爲50％。但元素2和3的初始值分別爲25％和65％，這意味着它們不能通過元素1的差值除以2來調整大小。

此外，在這3個父元素中還有多個子元素調整並調整其父母的尺寸。

元素的目的是允許用戶爲不同的類別設置百分比值，然後用於顯示圖形。

來源

2013-10-15 Seb Cooper

您是否找到任何解決方案？ – Napster

沒有人提供解決方案，我最終創建了自己的解決方案。我會有一段時間後發佈。你在做類似的事情嗎？ –

是的，我正在做類似的事情。我有5個div，代表100％的價值每個20％。當我重新設定div的大小時，上面的div也應該相應地重新調整大小以包含總計100％。即，當我增加div的大小時，其他人的大小應該減小。 – Napster

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

來源

2014-05-16 20:09:47

JQuery用戶界面垂直調整大小和反向容器

回答

相關問題