jQuery UI布局-如何更改窗格的选项并动态应用它们而不切换窗格的打开/关闭状态? [英] jQuery UI Layout - How change a pane's options and dynamically apply them without toggling the pane open/closed?

问题描述

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

使用插件 jQuery UI布局，我有几个不同的窗格.当用户将窗口调整为较小的尺寸时，我想调用一个函数来更改窗格的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;
});

解决方案

我不确定是否会有回调函数或任何特殊的实用程序方法来解决问题.

但是您可以尝试执行以下操作(可能需要使用resize函数来手动调整窗格的大小)-

 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> 

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

Using the plugin jQuery UI Layout, I have several different panes. When the user resizes the window to a small size, I would like to call a function that changes the minsize and size of the pane so that I can make it smaller with the window.

I can do this, but for the changes to apply, I must toggle closed and then toggle open the pane. This creates a lot of flickering and ends up being pretty messy looking. I only need this one pane to resize in this fashion.

QUESTION: Is there a way I can apply these layout changes without having to toggle the pane twice for them to apply?

Check out this Fiddle that I made: http://jsfiddle.net/jc3rj681/2/

In here, the changes to the "width" of the show/hide button don't get applied until you toggle the pane. If you can make this width change work without toggling, I'm sure it would solve my problem as well.

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

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


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

解决方案

I'm not sure if there is a callback function or any special utility method that'll do the trick.

But you can try something like the following (probably with a resize function that'll resize the panes manually) -

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>

这篇关于jQuery UI布局-如何更改窗格的选项并动态应用它们而不切换窗格的打开/关闭状态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！