Làm thế nào để kích hoạt jquery Resizable thay đổi kích thước lập trình?

Question

Tôi có một phần tử div được tạo thành jquery Resizable. Nó cũng đã thiết lập tùy chọnResize, do đó, các yếu tố khác thay đổi kích thước cùng một lúc. Điều tôi muốn làm là đặt kích thước của phần tử div Resizable này theo cách như vậy, rằng tất cả logic Resizable được kích hoạt (đặc biệt là tùy chọn này cũng được xem xét).

Làm cách nào để đạt được điều đó?

Answer 1

Cập nhật: Dường như nội bộ của giao diện người dùng jQuery đã thay đổi đáng kể kể từ khi tôi trả lời câu hỏi này và kích hoạt sự kiện không còn hoạt động nữa.

Không có cách nào trực tiếp để kích hoạt sự kiện nữa vì plugin thay đổi kích thước đã được thay đổi về cơ bản. It resizes as the mouse is dragged rather than syncing items up at the end. Điều này xảy ra bởi nó lắng nghe sự kiện tuyên truyền nội bộ resize cho các plugin có thể thay đổi kích thước mà is now fired by the _mouseDrag handler. Nhưng nó phụ thuộc vào các biến được thiết lập trên đường đi, do đó, chỉ cần bắn mà ngay cả trong nội bộ sẽ không giúp đỡ.

Điều này có nghĩa là thậm chí còn ghi đè nó là điều lộn xộn nhất. Tôi khuyên bạn chỉ nên thay đổi kích thước trực tiếp các thành phần alsoResize một cách thủ công, hoàn toàn độc lập với tiện ích con giao diện người dùng nếu có thể.

Nhưng để cho vui, giả sử nó không phải. Vấn đề là phần bên trong của plugin thiết lập các thuộc tính khác nhau liên quan đến vị trí chuột trước đó và hiện tại để biết có bao nhiêu thay đổi kích thước. Chúng ta có thể lạm dụng sử dụng đó để thêm một phương pháp để widget, như thế này:

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

Đây chỉ là tạo ra các sự kiện chuột mà widget resizable đang tìm kiếm và bắn những. Nếu bạn muốn làm một cái gì đó giống như resizeBy nó muốn được chấm dứt ngay cả đơn giản vì tất cả chúng ta quan tâm là đồng bằng:

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

Bạn muốn gọi phương thức $.widget() sau jQuery UI và trước khi tạo .resizable() trường hợp của bạn và họ tất cả sẽ có phương thức resizeTo. phần đó không thay đổi, nó chỉ là:

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

Sau đó, để thay đổi kích thước, bạn muốn gọi đó là phương pháp mới resizeTo như thế này:

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

này sẽ đóng vai trò như nếu bạn ngay lập tức kéo nó đến đó kích thước. Tất nhiên có một vài gotchas đây:

• Trục "se" là giả sử bạn muốn thay đổi kích thước của góc dưới bên phải - Tôi nhặt này bởi vì nó là bởi đến nay các kịch bản phổ biến nhất, nhưng bạn chỉ có thể làm cho nó một tham số.
• Chúng tôi đang tìm kiếm các sự kiện nội bộ một chút, nhưng tôi cố ý sử dụng ít chi tiết triển khai nội bộ nhất có thể để điều này ít có khả năng xảy ra trong tương lai.
• Nó hoàn toàn có thể phá vỡ trong các phiên bản tương lai của giao diện người dùng jQuery, tôi chỉ cố gắng giảm thiểu cơ hội đó.

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

---

câu trả lời gốc:

Bạn có thể làm điều này:

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

alsoResize nội bộ giàn dựng một handler cho sự kiện resize, vì vậy bạn chỉ cần gọi mà :)

Answer 2

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

Và cùng với chiều rộng.

Answer 3

Tôi cần điều tương tự cho các bài kiểm tra. Similarquestions chỉ có một câu trả lời đầy hứa hẹn https://stackoverflow.com/a/17099382/1235394, nhưng nó yêu cầu thiết lập bổ sung, vì vậy tôi đã kết thúc bằng giải pháp của riêng mình.

Tôi có một phần tử với thay đổi kích thước cạnh phải

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

và tôi cần phải kích hoạt tất cả các callbacks trong khi thử nghiệm để thay đổi kích thước tất cả các yếu tố đúng cách. Phần chính của mã kiểm tra:

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

Tất nhiên mã này dễ vỡ và có thể bị hỏng khi thay đổi triển khai tiện ích.

Answer 4

Bạn có thể kích hoạt các thanh lập trình. Ví dụ: để kích hoạt sự kiện đổi kích thước đông-tây:

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

Tôi đang làm 1px bên trái theo sau 1px trên thanh điều khiển phía đông. Để thực hiện kích thước đầy đủ, bạn có thể nhắm mục tiêu .ui-resizable-handle.ui-resizable-se nếu bạn có các thanh đổi kích thước về phía đông và nam.

Answer 5

Hack Disclaimer (thử nghiệm trên jQuery 1.12.4):

này về cơ bản chờ đợi cho hộp thoại được mở ra và sau đó tăng bởi 1px (mà buộc sự kiện resize()) và sau đó suất này bởi 1px (để lấy lại original kích thước)

chỉ nói điều này trong xử lý sự kiện open thoại:

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

lưu ý:

này có thể không làm việc với chương trình hiệu ứng (như fadeIn,slideDown vv) là "resizer" mã thực thi trước khi hộp thoại được trả lại đầy đủ.