使用jQuery UI的可調整大小的分割屏幕div

我有一個涉及html中的分割面板視圖的設計，類似於winforms分割面板。我一直在用jQuery UI - Resizable實現，我喜歡這個功能，我似乎無法協調調整兩個div的大小。當前代碼的問題在於兩個div彼此重新調整距離，而不是一個跟隨另一個。我怎樣才能讓兩個div一起工作？使用jQuery UI的可調整大小的分割屏幕div

<html> 
    <head> 
     <title>Test</title> 
     <link rel="stylesheet" type="text/css" href="css/custom.css" /> 
     <link rel="stylesheet" type="text/css" href="css/superfish.css" media="screen"> 
     <link rel="stylesheet" type="text/css" href="css/jquery-ui-1.8.10.custom.css" media="screen"> 
     <script type="text/javascript" src="script/jquery-1.5.1.js"></script> 
     <script type="text/javascript" src="script/superfish.js"></script> 
     <script type="text/javascript" src="script/jquery-ui-1.8.10.custom.min.js"></script> 
     <script type="text/javascript"> 


     // initialise plugins 
     $(function(){ 
      try { 
       $('ul.sf-menu').superfish(); 

       //set up divs 
       $('#Content').resizable({ handles: 'e', alsoResize: $('#Attributes')}); 

      }catch(ex){ 
       alert(ex.message); 
      } 
     }); 

     </script> 
    </head> 
    <body> 
     <div id="Header"> 
      <div id="Menu"> 
       <ul class="sf-menu" id="nav"> 
        <!-- Snip menu --> 
       </ul> 
      </div> 
     </div> 
     <div id="Middle"> 
      <div id="Content" class="ui-widget-content">This is where the view is.<br/> 
      Imagine an image here ... 
      <br/> 
      <br/> 
      <br/> 
      </div> 
      <div id="Attributes" class="ui-widget-content"> 
       <ul> 
        <li>A</li> 
        <li>B</li> 
        <li>C</li> 
       </ul> 
      </div> 
     </div> 
     <div id="FootBreak"/> 
     <div id="Footer"> 
      <a href="#">Help</a> 
     </div> 
    </body> 
</html>

來源

2011-03-04 C. Ross

你試過把類似的風格=「顯示：內聯;浮動：左/（右爲其他）」？ – asawyer 2011-03-04 21:33:23

@asawyer，是的。他們堅持在屏幕的兩側，但div2不調整... – 2011-03-04 21:35:51

相關：[分割窗格使用CSS3 Resize屬性]（http://stackoverflow.com/questions/3758728/split-pane-using-css3 -resize-property），效果相同，除了我需要它在IE中工作。我會解決除jQuery以外的解決方案，我只是認爲它最好的B/C它已經獨立於瀏覽器（主要）。 – 2011-03-05 00:07:52

我不確定這是否符合要求，但ExtJS輕鬆處理拆分窗格並且可以跨瀏覽器工作。例如，請參閱RSS feed client in ExtJS。如果您的意圖是銷售您的產品，請注意ExtJS有商業許可限制。

來源

2011-03-05 05:08:55 bwest

我已經制定了一個合理的黑客，使用resize事件。

<script type="text/javascript"> 

    var WIDTH_ATTR = 'initWidth'; 

    // initialise plugins 
    $(function(){ 
     try { 
      $('#Content').resizable({ handles: 'e', resize: resizeAttr }); 
      $('#Content').attr(WIDTH_ATTR, $('#Content').width()); 
      $('#InfoPanel').attr(WIDTH_ATTR, $('#InfoPanel').width()); 
     }catch(ex){ 
      alert(ex.message); 
     } 
    }); 

    function resizeAttr(event, ui){ 
     var change = ui.size.width - $('#Content').attr(WIDTH_ATTR); 
     $('#InfoPanel').width($('#InfoPanel').attr(WIDTH_ATTR) - change); 
    }; 

</script>

_{我仍然開放給其他清潔答案...}

來源

2011-03-05 13:44:04

使用jQuery UI的可調整大小的分割屏幕div

回答

相關問題