调整布局的大小

jQuery : Resizing the layouts

本文关键字：布局 调整      更新时间：2023-09-26

我想要像jsFiddle: link那样的可调整大小的功能。如果我用我自己的话来解释，有四种布局
[1. HTML, 2. javascript, 3. CSS & 4.Result]，我们可以向内调整布局大小&向外。我已经尝试过使用jQuery来调整大小，但没有像jsFiddle那样做。

    my example:  CSS 
 #parent { position:relative; width 100%; height:100%;}
    #left {position:absolute;left:0; width:48%;height:100%; border:1px dashed; }
    #right {position:absolute;right:0; width:48%;height:100%; border:1px dashed; }
    <div id = "parent"> 
      <div class="resize" id = "left"> </div>
      <div class="resize" id = "right"> </div>
    </div>
    js: $(function() { $('.resize').resizable(    { handlers: 'n,e,s,w' }    ); 
    });
例如

，有两个布局left & right，大小相等。当我调整任何div的大小时，其他div也应该改变它的大小，但它不会在大小上产生任何差异，而jsFiddle会。

在代码中添加jQuery css，它将正常工作。添加这一行:

<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
**Editing**:: Use this one: It will work for left div. try this :)
 /*my example:  CSS */
 #parent { position:relative; width 100%; height:100%;}
 #left {position:absolute;left:0; width:48%;height:100%; border:1px dashed; }
 #right {position:absolute;right:0; width:48%;height:100%; border:1px dashed; }
/*my example:  JS */
jQuery(function() { 
    jQuery('#left').resizable({  
                                resize: function(event, ui) {
                                            var leftWidth = ( 100 * parseFloat($('#left').css('width')) /   parseFloat($('#left').parent().css('width')) );
                                            var rigthWidth = 100 - leftWidth - 4;//4 is ur distance between two divs
                                            jQuery('#right').css('width', rigthWidth + '%');
                                        }
                            });
});
<div id = "parent"> 
  <div class="resize" id = "left"> </div>
  <div class="resize" id = "right"> </div>
</div>
相关文章：