Korzystanie z narzędzia Pomóż zmienić rozmiar w oknie dialogowym

Question

Jak korzystać z funkcji Helper z jQuery Resizable (która wyświetla ramkę tylko podczas zmiany rozmiaru kontenera) na Dialog?

Answer 1

This answer wyjaśnia, jak osiągnąć to, czego szukasz. Oto działa jsFiddle.

Odpowiedź ma jedną wadę: uchwyt zmiany rozmiaru znajduje się pod oknem dialogowym, jeśli jest zmniejszany. Jest to rozwiązywane przez z-index: 10000 !important;. Łączony tutaj plik jsFiddle zawiera poprawkę.

---

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

Zgodnie z tym - http://forum.jquery.com/topic/specify-drag-and-resize-option-for-dialogs powinno być możliwe przez działanie:

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

Ale niestety nie jest to błąd w jQueryUI (http://bugs.jqueryui.com/ticket/6723), który blokuje to z pracy.

Jednym z możliwych rozwiązań byłoby użycie jQueryUI resizable zamiast dialog. Zależy od tego, jak ciężko polegasz na funkcjonalności dialog.