JQuery макет фиксированной ширины при закрытии

Question

Я пытаюсь установить ширину панели ui-layout-west в определенном измерении, когда она закрыта. По умолчанию, когда вы нажимаете "переключатель", панель полностью закрывается, как видно из этого примера. То, что я хочу, это чтобы "западная панель" была установлена ​​в "40px" и все еще сохраняла часть содержимого. В настоящее время я могу установить этот желоб CSS, но западная панель исчезает. Посмотрите мой пример JsFidle, чтобы лучше понять.

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

Как мне лучше всего получить этот эффект? Я хотел бы как можно больше полагаться на настройки плагина JQuery и меньше на CSS.

Answer 1

Я думаю, что проблема в том, что закрытый означает закрытый и ушедший, и поэтому вы не должны видеть рамку. Если я понимаю, что вы хотите сделать правильно, вы можете подделать это, переопределив действие close с помощью пользовательского кода.

Это включает переопределение обратного вызова 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;
    });