Sử dụng Trình trợ giúp có thể chỉnh lại jQuery trên Hộp thoại

Question

Làm cách nào để sử dụng chức năng Helper từ jQuery Resizable (chỉ hiển thị khung trong khi vùng chứa được thay đổi kích thước) trên Dialog?

Answer 1

This answer giải thích cách đạt được những gì bạn đang tìm kiếm. Đây là một hoạt động jsFiddle.

Câu trả lời có một lỗ hổng: tay cầm thay đổi kích thước nằm bên dưới hộp thoại nếu nó đang bị thu hẹp. Điều này được giải quyết thông qua z-index: 10000 !important;. Các jsFiddle liên kết ở đây bao gồm sửa chữa.

---

HTML:

<div id="dialog" title="Basic dialog"> 
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p> 
</div> 

CSS:

.ui-resizable-helper { 
    border: 2px dotted #00F; 
    z-index: 10000 !important; 
} 

JavaScript:

$("#dialog").dialog().dialog('widget').resizable('destroy').resizable({ 
    helper: "ui-resizable-helper" 
}); 

Answer 2

Theo này - http://forum.jquery.com/topic/specify-drag-and-resize-option-for-dialogs chúng ta có thể bằng cách làm:

dlg.dialog('widget').resizable('option','helper','ui-resizable-helper') 

Nhưng tiếc là có một lỗi trong jQueryUI (http://bugs.jqueryui.com/ticket/6723) mà khối này từ làm việc.

Một giải pháp có thể là sử dụng jQueryUI resizable thay vì dialog. Phụ thuộc vào mức độ bạn dựa vào chức năng của dialog.