Question

我想要像jsFiddle那样具有可调整大小的功能：link.如果我用自己的话解释有四种布局
[1. HTML, 2. javascript, 3. CSS & 4.Result]我们可以重新调整内部布局＆amp;向外。我曾尝试使用jQuery进行resizable，但没有像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没有任何大小差异时。

Answer 1

在您的代码中添加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>

jQuery：调整布局大小

1 个答案: