Как программно изменить размер jquery Resizable?

Обновление: похоже, что внутреннее устройство пользовательского интерфейса jQuery сильно изменилось с тех пор, как я ответил на этот вопрос, и запуск события больше не работает.

Больше нет прямого способа запустить событие, потому что плагин с изменяемым размером был коренным образом изменен. Изменяет размер при перетаскивании мыши вместо синхронизации элементов в конце. Это происходит путем прослушивания внутреннего события распространения resize для подключаемых модулей с изменяемым размером, которые сейчас запускается обработчиком _mouseDrag. Но это зависит от переменных, устанавливаемых по пути, поэтому просто запуск этого даже внутри не поможет.

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

Но ради забавы скажем, что это не так. Проблема в том, что внутренности плагина устанавливают различные свойства, относящиеся к предыдущей и текущей позиции мыши, чтобы знать, на сколько изменить размер. Мы можем злоупотреблять использовать это, чтобы добавить метод к виджету, например:

$.widget("ui.resizable", $.ui.resizable, {
    resizeTo: function(newSize) {
        var start = new $.Event("mousedown", { pageX: 0, pageY: 0 });
        this._mouseStart(start);
        this.axis = 'se';
        var end = new $.Event("mouseup", {
            pageX: newSize.width - this.originalSize.width,
            pageY: newSize.height - this.originalSize.height
        });
        this._mouseDrag(end);
        this._mouseStop(end);
    }
});

Это просто создает события мыши, которые ищет виджет resizable, и запускает их. Если бы вы хотели сделать что-то вроде resizeBy, это был бы еще более простой конец, поскольку все, что нам нужно, это дельта:

var end = $.Event("mouseup", { pageX: newSize.width, pageY: newSize.height });

Вы бы вызвали метод $.widget() после пользовательского интерфейса jQuery и перед созданием экземпляров .resizable(), и все они будут иметь метод resizeTo. Эта часть не меняется, просто:

$(".selector").resizable({ alsoResize: ".other-selector" });

Затем, чтобы изменить размер, вы должны вызвать этот новый метод resizeTo следующим образом:

$(".selector").resizable("resizeTo", { height: 100, width: 200 });

Это будет действовать так, как если бы вы мгновенно перетащили его до этого размера. Здесь, конечно, есть несколько подводных камней:

• Ось "se" предполагает, что вы хотите изменить размер в правом нижнем углу — я выбрал это, потому что это, безусловно, самый распространенный сценарий, но вы можете просто сделать его параметром.
• Мы немного подключаемся к внутренним событиям, но я намеренно использую как можно меньше деталей внутренней реализации, чтобы с меньшей вероятностью сломаться в будущем.
• Это может полностью сломаться в будущих версиях пользовательского интерфейса jQuery, я только пытался свести к минимуму вероятность этого.

Вы можете поиграть с ним в действии со скрипкой здесь и версия resizeBy здесь.

Исходный ответ:

Ты можешь это сделать:

$(".selector").trigger("resize");

alsoResize внутренне настраивает обработчик события resize, так что вам просто нужно вызвать его :)

Вы можете запускать бары программно. Например, чтобы инициировать событие изменения размера с востока на запад:

var elem =... // Your ui-resizable element
var eastbar = elem.find(".ui-resizable-handle.ui-resizable-e").first();
var pageX = eastbar.offset().left;
var pageY = eastbar.offset().top;

(eastbar.trigger("mouseover")
        .trigger({ type: "mousedown", which: 1, pageX: pageX, pageY: pageY })
        .trigger({ type: "mousemove", which: 1, pageX: pageX - 1, pageY: pageY })
        .trigger({ type: "mousemove", which: 1, pageX: pageX, pageY: pageY })
        .trigger({ type: "mouseup", which: 1, pageX: pageX, pageY: pageY }));

Я делаю движение на 1 пиксель влево, а затем на 1 пиксель вправо на рукоятке восточной панели. Чтобы выполнить полный размер, вы можете настроить таргетинг на .ui-resizable-handle.ui-resizable-se, если у вас есть полосы изменения размера на восток и юг.

Мне нужно было то же самое для тестов. Аналогично вопросы имеют только один многообещающий ответ https://stackoverflow.com/a/17099382/1235394, но требует дополнительной настройки, поэтому я закончил со своим решением.

У меня есть элемент с изменяемым размером правого края

$nameHeader.resizable({handles: 'e', ... });

и мне нужно было вызвать все обратные вызовы во время теста, чтобы правильно изменить размер всех элементов. Ключевая часть тестового кода:

var $nameHeader = $list.find('.list-header .name'),
    $nameCell = $list.find('.list-body .name');
ok($nameHeader.hasClass('ui-resizable'), 'Name header should be resizable');
equal($nameCell.outerWidth(), 300, 'Initial width of Name column');

// retrieve instance of resizable widget
var instance = $nameHeader.data('ui-resizable'),
    position = $nameHeader.position(),
    width = $nameHeader.outerWidth();
ok(instance, 'Instance of resizable widget should exist');

// mouseover initializes instance.axis to 'e'
instance._handles.trigger('mouseover');
// start dragging, fires `start` callback
instance._mouseStart({pageX: position.left + width, pageY: position.top});
// drag 50px to the right, fires `resize` callback
instance._mouseDrag({pageX: position.left + width + 50, pageY: position.top});
// stop dragging, fires `stop` callback
instance._mouseStop({pageX: position.left + width + 50, pageY: position.top});

// ensure width of linked element is changed after resizing
equal($nameCell.outerWidth(), 350, 'Name column width should change');

Конечно, этот код ненадежен и может сломаться при изменении реализации виджета.

Отказ от ответственности за взлом (проверено на jQuery 1.12.4):

Это в основном ждет открытия диалогового окна, а затем увеличивается на 1px (что вызывает событие resize()), а затем уменьшается на 1px (чтобы восстановить размер original)

просто скажите это в обработчике событий диалога open:

 $(this)
.dialog("option","width",$(this).dialog("option","width")+1)
.dialog("option","width",$(this).dialog("option","width")-1);

примечание:

Это может не работать с эффектами шоу (такими как fadeIn,slideDown и т. д.), поскольку код «изменения размера» выполняется до того, как диалоговое окно будет полностью отображено.

$(".yourWindow").each(function(e) {
    $(this).height($(this).find(".yourContent").height());
});

И так же с шириной.