JQuery布局固定宽度关闭时

Question

我试图在关闭时在特定维度上设置ui-layout-west窗格的宽度。默认情况下，按下“切换器”时，该窗格会完全关闭，如this example中所示。我想要的是将“west-pane”设置为“40px”，并仍保留部分内容。目前我可以设置这个低谷CSS，但西面窗格消失。请参阅my JsFidle example以更好地理解。

div.ui-layout-resizer.ui-layout-resizer-west.ui-layout-resizer-closed.ui-layout-resizer-west-closed { 
    left: 40px !important; 
} 

我该如何最好地获得这种效果？我想尽可能地依赖JQuery插件设置，而不是在CSS上。

Answer 1

我认为问题在于关闭意味着关闭和消失，所以你不应该仍然能够看到框架。如果我明白你想要正确地做什么，你可以通过用自定义代码覆盖关闭操作来伪造它。

这涉及覆盖onclose_start回调，设置大小，然后返回false以防止窗格关闭。请注意，这意味着就系统而言，该窗格并未真正关闭。

下面的代码完成了所有这些工作，它在西面窗格状态对象上创建一个新变量来存储旧尺寸。它定义了在创建函数开始时（尽管如果没有定义系统没有抱怨）。您也可以使用全局变量或其他存储。您可以使该功能更通用，不仅适用于西方等。

我不确定您希望系统如何工作，您可能需要摆弄if条件。

$(document).ready(function() { 
    var mylayout = $("body").layout(
     {west: { 
      minSize: 40, 
      onclose_start: function() {      
       var closed_size = 40;   
       var current_size = mylayout.state.west.size; 

       if (current_size <= closed_size) { 
        mylayout.sizePane('west', mylayout.state.west.old_size);      
       } else { 
        mylayout.sizePane('west', closed_size);      
        mylayout.state.west.old_size = current_size; 
       }      
       return false; 
      }} 
     }); 
    mylayout.state.west.old_size = mylayout.state.west.size; 
    });