Как запускать jquery Изменчивое изменение размера программно?

Ответ 1

Обновление: Похоже, что внутренности пользовательского интерфейса 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, это было бы еще проще, так как все, о чем мы заботимся, это delta:

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, поэтому вам просто нужно вызвать это:)

Ответ 2

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

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 }));

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

Ответ 3

Мне нужно было то же самое для тестов. Аналогично questions есть только один многообещающий ответ fooobar.com/questions/299174/..., но для этого требуется дополнительная настройка, поэтому я закончил свое собственное решение.

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

$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');

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

Ответ 4

Hack Disclaimer (проверено на 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);

Примечание:

Это может не работать с эффектами show (например, fadeIn,slideDown и т.д.), так как код "resizer" выполняется до полного отображения диалога.

Ответ 5

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

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