Jak programowo uruchamiać zmianę rozmiaru narzędzia jquery Resizable?

Question

Mam element div, który jest jquery Resizable. Ma również zestaw opcjiRizeize, więc inne elementy zmieniają się jednocześnie.

Co chcę zrobić, to ustawić rozmiar tego elementu div z możliwością zmiany rozmiaru programistycznie w taki sposób, że zostanie wyzwolona cała logika zmiany rozmiaru (w szczególności bierze się pod uwagę tę opcję równieżResize).

Jak mogę to osiągnąć?

Answer 1

Aktualizacja: Wygląda na to, że wewnętrzne z jQuery UI zmieniły się od czasu, kiedy ten odpowiedział i wypalania zdarzenie już nie działa.

Nie można już bezpośrednio wywołać zdarzenia, ponieważ zmienna rozmiar wtyczki został zasadniczo zmieniony. It resizes as the mouse is dragged rather than syncing items up at the end. Dzieje się tak, słuchając wewnętrznego zdarzenia propagacji resize dla skalowalnych wtyczek, które są is now fired by the _mouseDrag handler. Ale zależy to od zmiennych ustawionych po drodze, więc samo strzelanie, nawet wewnętrznie, nie pomoże.

Oznacza to, że nawet nadpisanie jest w najlepszym wypadku niechlujne. Zalecam po prostu ręczną zmianę rozmiaru elementów alsoResize bezpośrednio, niezależnie od widgetu interfejsu użytkownika, jeśli jest to możliwe.

Ale dla zabawy powiedzmy, że tak nie jest. Problem polega na tym, że elementy wewnętrzne wtyczki ustawiają różne właściwości odnoszące się do poprzedniej i aktualnej pozycji myszy, aby wiedzieć, jak wiele zmienić. Możemy nadużycie używać, aby dodać metodę do widgetu, tak:

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

To jest właśnie tworzenie zdarzeń myszy, że widżet resizable się szuka i zwalniania tych. Jeśli chcesz zrobić coś resizeBy byłoby jeszcze prostsze koniec ponieważ wszystko dbamy o to delta:

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

Można by wywołać metodę $.widget() po jQuery UI i przed tworzenia .resizable() instancji i Wszystkie będą miały metodę resizeTo. Ta część nie ulegnie zmianie, to po prostu:

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

Następnie na zmianę rozmiaru, można by nazwać ten nowy resizeTo metody takie jak to:

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

to będzie działać jako jeśli natychmiast zaciągnął go do rozmiar. Istnieje oczywiście kilka pułapek tutaj:

• Oś "se" nabiera chcesz zmienić rozmiar prawym dolnym rogu - Wybrałem to dlatego, że jest zdecydowanie najbardziej wspólnego scenariusza, ale może po prostu zrobić to parametr.
• Trochę zaabsorbujemy wewnętrzne wydarzenia, ale celowo używam możliwie jak najmniej szczegółów wewnętrznych implementacji, więc jest to mniej prawdopodobne w przyszłości.
• Mogłoby to całkowicie zepsuć w przyszłych wersjach jQuery UI, starałem się tylko zmniejszyć szanse na to.

You can play with it in action with a fiddle here i the resizeBy version here.

---

odpowiedź oryginalny:

Można to zrobić:

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

alsoResize wewnętrznie samojezdne górę obsługi do zdarzenia resize, więc wystarczy, aby wywołać że :)

Answer 2

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

I to samo z szerokością.

Answer 3

Potrzebowałem tego samego do testów. Similarquestions ma tylko jedną obiecującą odpowiedź https://stackoverflow.com/a/17099382/1235394, ale wymaga dodatkowej konfiguracji, więc skończyłem z własnym rozwiązaniem.

Mam element z resizable prawej krawędzi

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

i musiałem wywołać wszystkie wywołania zwrotne podczas testu w celu zmiany rozmiaru wszystkich elementów prawidłowo. Kluczowa część kodu testowego:

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

Oczywiście ten kod jest kruchy i może się zepsuć po zmianie implementacji widgetu.

Answer 4

Możesz uruchamiać paski programowo. Na przykład, aby wyzwalać zdarzenia zmiany rozmiaru wschód-zachód:

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

Robię lewo 1px 1px następnie prawym ruchu na uchwycie paska wschód. Aby wykonać pełny rozmiar, możesz wybrać opcję .ui-resizable-handle.ui-resizable-se, jeśli używasz pasków rozmiaru wschodniego i południowego.

Answer 5

Hack Zastrzeżone (testowane na jQuery 1.12.4):

To w zasadzie czeka na okno, które zostaną otwarte, a następnie zwiększa przez 1px (co wymusza zdarzenie resize()), a następnie ubytków przez 1px (aby odzyskać original rozmiar)

tylko powiedzieć, że to w oknie obsługi open zdarzeń:

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

uwaga:

ta może nie działać z występów efektów (jak fadeIn,slideDown etc) jako „Resizer” Kod wykonywany zanim okno jest w pełni renderowane.