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

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

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

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


person Andrei V    schedule 30.07.2013    source источник


Ответы (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;
    });
person SpaceDog    schedule 30.07.2013
comment
Спасибо! Оно работает. Теперь мне нужно только вставить третий вариант, чтобы он полностью закрылся. - person Andrei V; 30.07.2013