jQuery UI Layout - Как изменить параметры панели и динамически применить их, не переключая панель в открытое / закрытое положение?

Question

http://jsfiddle.net/jc3rj681/2/

Используя плагин jQuery UI Layout, у меня есть несколько разных панелей. Когда пользователь изменяет размер окна до небольшого размера, я хотел бы вызвать функцию, которая изменяет minsize а также size панели, так что я могу сделать его меньше с окном.

Я могу сделать это, но чтобы изменения вступили в силу, я должен закрыть и затем открыть панель. Это создает много мерцания и в конечном итоге выглядит довольно грязно. Мне нужно только одну панель, чтобы изменить размер таким способом.

ВОПРОС: Есть ли способ применить эти изменения макета, не переключая панель дважды для их применения?

Проверьте эту скрипку, которую я сделал: http://jsfiddle.net/jc3rj681/2/

Здесь изменения ширины кнопки "показать / скрыть" не будут применены, пока вы не переключите панель. Если вы можете заставить это изменение ширины работать без переключения, я уверен, что это решит и мою проблему.

$("#eastToggle").click(function () {

    testLayout.toggle('east');    
});


$("#attempt").click(function () {
    testLayout.options.east.spacing_closed = 20;
    testLayout.options.east.spacing_open = 20;
});

Answer 1

Я не уверен, есть ли функция обратного вызова или какой-либо специальный служебный метод, который поможет.

Но вы можете попробовать что-то вроде следующего (возможно, с помощью функции изменения размера, которая будет изменять размеры панелей вручную) -

var testLayout = $('body').layout({
  applyDefaultStyles: true,
  east: {
    spacing_closed: 100, //toggler width
    spacing_open: 100,
    togglerLength_closed: 200, //toggler height (length)
    togglerLength_open: 200
  }
});

$("#eastToggle").click(function() {

  testLayout.toggle('east');

});


$("#attempt").click(function() {
  resize('east', 20);
});


// A function to resize the tab
function resize(region, space) {
  // Width of the new center pane
  var newCenterWidth = parseInt($('body .ui-layout-center').css('width').split('px')[0]) + testLayout.options.east.spacing_closed - space;

  // Change the options so they don't affect the layout when you expand / collapse again
  testLayout.options.east.spacing_closed = space;
  testLayout.options.east.spacing_open = space;

  // Manually resize the panes
  $('body .ui-layout-resizer-' + region).css('width', space);
  $('body .ui-layout-center').css('width', newCenterWidth);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://layout.jquery-dev.net/lib/js/jquery.layout-latest.js"></script>
<div class="ui-layout-center">Center</div>
<div class="ui-layout-north">North</div>
<div class="ui-layout-south">South</div>
<div class="ui-layout-east">East</div>
<div class="ui-layout-west">West
  <br/>
  <br/>

  <button id="eastToggle">Toggle East Panel</button>
  <br/>
  <br/>
  <button id="attempt">Change Width?</button>
</div>