Обновление: Похоже, что внутренняя часть пользовательского интерфейса 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 UI и перед созданием ваших .resizable() экземпляров, и у них всех будет метод resizeTo. Эта часть не меняется, она просто:
$(".selector").resizable({ alsoResize: ".other-selector" });
Затем, чтобы изменить размер, вы бы вызвали этот новый resizeTo метод, подобный этому:
$(".selector").resizable("resizeTo", { height: 100, width: 200 });
Это будет действовать так, как будто вы мгновенно перетащите его к этому размеру. Здесь, конечно, есть несколько ошибок:
- Ось
"se" предполагает, что вы хотите изменить размер в правом нижнем углу - я выбрал это, потому что это, безусловно, самый распространенный сценарий, но вы можете просто сделать его параметром.
- Мы немного подключаемся к внутренним событиям, но я намеренно использую как можно меньше внутренних деталей реализации, чтобы в будущем это было менее вероятным.
- В будущих версиях пользовательского интерфейса jQuery он может полностью сломаться, я лишь попытался свести к минимуму шансы на это.
Вы можете играть с ним в действии с скрипкой здесь и resizeBy версия здесь .
Оригинальный ответ:
Вы можете сделать это:
$(".selector").trigger("resize");
alsoResize внутренне подключает обработчик к событию resize, так что вам просто нужно вызвать его:)