1

コード：

<div id="widget1">
  <div class="part blue">this is the part</div>
  <div class="part white">of the genial</div>
  <div class="part red">and good widget</div>
</div>

div#widget1それが99pxの幅で、デフォルトで33pxであるとしましょうdiv.part。

div.blue他のdiv.partの幅を拡大し、幅を縮小することで、簡単にサイズを変更するにはどうすればよいですか？

http://jqueryui.com/demos/resizable/#synchronous-resize：要素の増加を同時に示す例を示します。

4

2 に答える 2

4

div パネルのサイズ変更の重複の可能性

ここで私のソリューションをテストします: http://jsfiddle.net/lnplnp/MxKLH/

しかし、これは私が必要とすることを完全に行います:

ジャバスクリプト：

$(document).ready(function() {

  // init
  var containerWidth = $("#container").width();
  var nbpanels = $(".panel").size();
  var padding = 2.5;

  $(".panel").width( (containerWidth / nbpanels) - (nbpanels * padding - 2 * padding));

  $(".panel").resizable({
    handles: 'e',
    maxWidth: 450,
    minWidth: 120,
    resize: function(event, ui){
      var currentWidth = ui.size.width;
      // set the content panel width
      $(".panel").width( ( (containerWidth - currentWidth + padding ) / (nbpanels - 1) ) - ((nbpanels - 1) * padding) );
      $(this).width(currentWidth);
    }
  });

});

HTML :

<div id="container">
  <div id="panel1" class="panel" >
    some text, lorem ipsum. some text, lorem ipsum. some text, lorem ipsum.
  </div>
  <div id="panel2" class="panel" >
    some more text, lorem ipsum. some text, lorem ipsum. some text, lorem ipsum.
  </div>
  <div id="panel3" class="panel" >
    some text, lorem ipsum. some text, lorem ipsum. some text, lorem ipsum.
  </div>
  <div id="panel4" class="panel" >
    some text, lorem ipsum. some text, lorem ipsum. some text, lorem ipsum.
  </div>
  <div class="clear"></div>
</div>

CSS :

.clear{
  clear:both;
}

#container{
  border: 1px red solid;
  margin: 0 auto;
  width: 900px;
}

.panel{
  background-color: #9999FF;
  float: left;
  height: 200px;
  padding: 2.5px;
}

#panel1{
  background-color: #FF0000;
}

JSは改善できると思います...しかし、それは機能しています!

于 2012-10-08T09:34:07.063 に答える
0 
$('.part').attr('width',10);
$('.blue').attr('width',50);

これを使用すると、part という名前のすべての div の幅が減少し、青のみの幅が増加します。

于 2012-09-27T09:35:21.657 に答える