JQuery 布局关闭时固定宽度

Question

我试图在关闭时将 ui-layout-west Pane 的宽度设置为特定尺寸。默认情况下，当按下“切换器”时， Pane 会完全关闭，如 this example 中所示。 。我想要的是将“西 Pane ”设置为“40px”并仍然保留部分内容。目前我可以通过 CSS 设置这个槽，但西 Pane 消失了。请参阅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 以防止 Pane 关闭。请注意，这意味着就系统而言，该 Pane 并未真正关闭。

下面的代码完成了所有这些工作，它在西 Pane 状态对象上创建了一个新变量来存储旧大小。它在创建函数开始时定义了这一点(尽管如果未定义，系统不会提示)。您还可以使用全局变量或其他存储。您可以使该功能更加通用，而不仅仅是适用于西方等。

我不确定您希望系统如何工作，您可能需要摆弄 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;
    });