Как инициировать jQuery, Изменяемого размера, изменяют размер программно?

Обновление: Похоже, что внутреннее устройство пользовательского интерфейса 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);
    }
});

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

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

Вы должны вызвать $. Widget () после jQuery UI и до создания ваших экземпляров .resizable () , и все они будут иметь метод resizeTo . Эта часть не меняется, просто:

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

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

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

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

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

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

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

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

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

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