Verwenden von jQuery Resizable Helper für ein Dialogfeld

Question

Wie kann ich die Helper-Funktionalität von jQuery Resizable (die nur einen Rahmen anzeigt, während die Größe des Containers geändert wird) auf einer Dialog?

Answer 1

This answer erklärt, wie Sie erreichen, wonach Sie suchen. Hier ist eine funktionierende jsFiddle.

Die Antwort hat einen Fehler: Der Größenanpassungspunkt wird unter dem Dialogfeld angezeigt, wenn er verkleinert wird. Dies wird durch z-index: 10000 !important; gelöst. Das hier verlinkte jsFiddle enthält das Update.

---

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

Nach dieser - http://forum.jquery.com/topic/specify-drag-and-resize-option-for-dialogs sollte es möglich sein, indem Sie:

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

Aber leider gibt es einen Fehler in jQueryUI (http://bugs.jqueryui.com/ticket/6723), dass diese Blöcke von der Arbeit.

Eine mögliche Lösung wäre die Verwendung von jQueryUI resizable anstelle von dialog. Hängt davon ab, wie stark Sie sich auf die Funktionalität von dialog verlassen.