JAVASCRIPT EXAMPLES Resizable Dialog
In this example, an instance of the Uize.Widgets.Dialog.Widget class is being used to implement a resizable modal dialog. The dialog can be resized by dragging on any of the corners or sides. Dragging on a side changes the dialog's dimensions in one axis only, while dragging on a corner changes the dimensions in both axes. In any given HTML implementation of a resizable dialog, all drag handles are optional. If you like, you can provide just a lower right corner drag handle. Since resizable dialogs share code with the marquee widget (Uize.Widget.Resizer.Marquee), it is possible to configure a resizable dialog to have a constrained aspect ratio, or to be resizable only in one axis, by setting state for its resizer child widget. The resizable dialog widget has child widgets for the "OK", "CANCEL", and "CLOSE" buttons.
To open the dialog, click the "OPEN DIALOG" button below.
- Resizing Configurations
- FIXED WIDTH ONLY: dialog.children.resizer.set ({fixedX:true,fixedY:false}); dialog.set ({shown:true})
- FIXED HEIGHT ONLY: dialog.children.resizer.set ({fixedX:false,fixedY:true}); dialog.set ({shown:true})
- NOT RESIZABLE: dialog.children.resizer.set ({fixedX:true,fixedY:true}); dialog.set ({shown:true})
- FULLY RESIZABLE: dialog.children.resizer.set ({fixedX:false,fixedY:false}); dialog.set ({shown:true})