Как вызвать изменение размера jQuery программным способом?

У меня есть элемент div, который сделан jQuery изменяемым. Он имеет набор опций alsoResize, поэтому другие элементы изменяют размер одновременно.

Что я хочу сделать, это установить размер этого изменяемого элемента div программно таким образом, чтобы срабатывала вся изменяемая логика (особенно учитывается эта опция alsoResize).

Как я могу этого достичь?

19
jquery jquery-ui jquery-ui-resizable

5 ответов

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

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

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

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

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

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

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

вы можете играть с ним в действии со скрипкой здесь и the resizeBy версия вот!--26-->.

оригинальный ответ:

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

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

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

24

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

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 влево, а затем 1px правое движение на восточной ручке бара. Чтобы выполнить полный размер, вы можете элемент .ui-resizable-handle.ui-resizable-se если у вас есть Восток и юг изменить размер баров.

3

мне нужно то же самое для тестов. как вопросы есть только один многообещающий ответ 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');

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

1

Hack отказ от ответственности (проверено на 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 etc) как код" resizer" выполняется до полного отображения диалога.

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

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

-4