jQuery UI布局-如何更改窗格's选项，并在不切换打开/关闭窗格的情况下动态应用它们

jQuery UI Layout - How change a pane's options and dynamically apply them without toggling the pane open/closed?

本文关键字：动态 应用 情况下 何更改 布局 UI jQuery 选项      更新时间：2023-09-26

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

使用插件jQueryUILayout，我有几个不同的窗格。当用户将窗口大小调整为较小时，我想调用一个函数来更改窗格的minsize和size，这样我就可以使用窗口使其变小。

我可以这样做，但为了应用更改，我必须先关闭窗格，然后打开窗格。这会产生大量的闪烁，最终看起来相当混乱。我只需要这一个窗格以这种方式调整大小。

问题：有没有一种方法可以应用这些布局更改，而无需切换窗格两次即可应用？

看看我制作的这个Fiddle：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;
});

我不确定是否有回调函数或任何特殊的实用程序方法可以做到这一点。

但是您可以尝试以下操作(可能带有手动调整窗格大小的调整大小功能(-

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>

相关文章：