Задръжте границата и преоразмерете два или повече DIV едновременно в един и същи контейнер

код:

<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, а div.part е 33px по подразбиране.

Как мога лесно да преоразмеря div.blue, като увелича неговата ширина и пропорционално намаля ширината на друга div.part?

http://jqueryui.com/demos/resizable/#synchronous-resize : даде пример, който показва увеличаване на елемента за същото време.


javascript widget html jquery jquery-ui
person Manu    schedule 17.09.2012    source източник
comment
възможен дубликат на преоразмеряване на div панел   -  person Asciiom    schedule 27.09.2012
comment
Това е, което искам... Благодаря, Jeroen Moons! Ако копирате тази JS част от тази цигулка (jsfiddle.net/QkZL8/15) като отговор Ще потвърдя/приемам отговора   -  person Manu    schedule 27.09.2012
comment
Това не работи така, трябва просто да гласувате за отговора в другия въпрос. Това вероятно ще бъде затворено като дубликат.   -  person Asciiom    schedule 27.09.2012
comment
Свършен ! Благодаря за тази информация.   -  person Manu    schedule 28.09.2012
comment
Няма проблем, радвам се, че можах да помогна   -  person Asciiom    schedule 28.09.2012

Отговори (2)


arrow_upward
4
arrow_downward

възможен дубликат на преоразмеряване на div панел

Тествам решението си тук: http://jsfiddle.net/lnplnp/MxKLH/

Но това прави перфектно това, от което се нуждая:

JAVASCRIPT:

$(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 може да се подобри... но работи!

person Manu    schedule 08.10.2012

arrow_upward
0
arrow_downward 

$('.part').attr('width',10);
$('.blue').attr('width',50);

Използвайки това, ширината на всички divs, наречена част, ще бъде намалена и ширината само на синьото ще се увеличи.

person Amrish Prajapati    schedule 27.09.2012
comment

Използвам Mocha с Sinon за модулен тест на модулите ми node.js. Успешно се подиграх на други зависимости (други модули, които съм написал), но се натъкнах на проблеми при зарязване на нечисти функции (като Math.random() и Date.now()). Опитах следното (опростено, така че този въпрос да не е толкова локализиран), но Math.random() не беше блокиран поради очевиден проблем с обхвата. Екземплярите на Math са независими между тестовия файл и mymodule.js.

test.js

var sinon    = require('sinon'),
    mymodule = require('./mymodule.js'),
    other    = require('./other.js');

describe('MyModule', function() {
    describe('funcThatDependsOnRandom', function() {
        it('should call other.otherFunc with a random num when no num provided', function() {
            sinon.mock(other).expects('otherFunc').withArgs(0.5).once();
            sinon.stub(Math, 'random').returns(0.5);

            funcThatDependsOnRandom(); // called with no args, so should call
                                       // other.otherFunc with random num

            other.verify(); // ensure expectation has been met
        });
    });
});

Така че в този измислен пример functThatDependsOnRandom() ще изглежда така:

mymodule.js

var other = require('./other.js');

function funcThatDependsOnRandom(num) {
    if(typeof num === 'undefined') num = Math.random();

    return other.otherFunc(num);
}

Възможно ли е да заглушите Math.random() в този сценарий със Sinon?

- person Asciiom; 27.09.2012