使用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

回答

相关问题