Изменение размера jQuery UI: автоматическая высота, когда используется только восточная ручка

Question

У меня есть jqueryui изменяемый размер div. Я хочу, чтобы только ширина была изменяемой, а высота оставалась автоматической, чтобы div увеличивался или уменьшался вместе с содержимым. Если я установлю для отображения только восточный маркер и использую css height:auto, после изменения размера будет также установлена ​​высота, даже если изменилась только ширина. Я должен установить высоту, чтобы автоматически при изменении размера события каждый раз, как так:

resize: function(event, ui) {
    $(this).css('height', 'auto');
}

для предотвращения установки высоты. Есть ли лучший способ предотвратить установку высоты, когда используется только восточная ручка?

Answer 1

Попробуйте установить соотношение сторон И свойство handles:

    $( "#resizable" ).resizable({
        aspectRatio: 16 / 9,
                    handles: 'e'
    });

Приведенное выше создаст контейнер, который автоматически изменит размер до 16/9, только с ручкой на восточной стороне контейнера.

Вот описание с сайта документации на http://jqueryui.com/demos/resizable/#option-containment:

Если указано как строка, должен быть список с разделением запятыми любого из следующих: 'n, e, s, w, ne, se, sw, nw, all'. Необходимые дескрипторы будут автоматически сгенерированы плагином.

Если указано как объект, поддерживаются следующие ключи: {n, e, s, w, ne, se, sw, nw}. Значение любого указанного должно быть селектором jQuery, соответствующим дочернему элементу изменяемого размера для использования в качестве этого дескриптора. Если дескриптор не является потомком изменяемого размера, вы можете напрямую передать элемент DOMElement или действительный объект jQuery.

Примеры кода

Инициализировать изменяемый размер с указанным параметром handles.

$( ".selector" ).resizable({ handles: 'n, e, s, w' });

Получить или установить опцию дескрипторов после инициализации.

//getter
var handles = $( ".selector" ).resizable( "option", "handles" );
//setter
$( ".selector" ).resizable( "option", "handles", 'n, e, s, w' );