Dialog Widget
Dialog is an enhanced panel. It is used to group a set ou UI elements and isolate them from other UI components. Dialog supports all the panel configuring options.

Basic Usage
$.domLoaded(function() {
	
	$.get("#pan").widget("dialog", CONFIG_JSON );	
	
}
Configuring Options
It contains array of JSON objects. The properties are mentioned below.
NameTypeMust/OptionalDescription
headJSONOptionalSets the header section
NameDescription
titleTitle of the Dialog
closeBooleanOptionalEnables the close option of dialog and close button
maximizeBoolean / JSONOptionalEnables the maximizable option of dialog.
NameDescription
parentMaximize will happen to the size of dialog's parent
documentMaximize will happen to the document's view size
modalBooleanOptionalCreates a modal dialog. Other UI componenets will be inaccessible till the modal dialog is closed
layoutStringOptionalSets the layout of child elements. Allowed values are "horizontal" and "vertical"
dimJSONOptionalSets dimension of the dialog
NameDescription
widWidth of the dialog
htHeight of the dialog
posJSONOptionalSets position of the dialog
NameDescription
xHorizontal Position
yVertical Position
draggableBoolean / StringOptionalMakes the dialog draggable
ValyeDescription
trueMakes the dialog draggable anywhere
"parent"Makes the dialog draggable within the parent
"x"Only Horizontal drag
""y""Only Vertical drag
handleNedil.ObjsOptionalA Child element which acts as the handle for dialog drag movement
dragRangeXJSONOptional"x" axis drag movement can be restricted
NameDescription
minMinimum X value
maxMaximum X value
dragRangeYJSONOptional"y" axis drag movement can be restricted
NameDescription
minMinimum Y value
maxMaximum Y value
nostyleBooleanOptionalRemoves the default styling of a dialog by Nedil
resizableStringOptionalMakes a dialog resizable
minSizeJSONOptionaldialog cannot be resized smaller than the specified values
NameDescription
widMin Width of the dialog
htMin Height of the dialog
maxSizeJSONOptionaldialog cannot be resized bigger than the specified values
NameDescription
widMax Width of the dialog
htMax Height of the dialog
showJSONOptionalTurns off the default display of dialogs

Methods
NameDescription
show( [force] )Show the dialog. if force is set to true, dialog will be shown fully maximized
close()Close / hides the dialog
maximize()Maximizes or minimizes based on the dialog's current status

Dialog Widget Examples Example 1
JS HTML
			$.domLoaded( function() {

				
				$.get("#dial1").widget("dialog", {
					head : { 
							title : "Simple Dialog"
						},
					dim : { wid : 300, ht : 200},
					pos : { x : 20, y : 20},
				});	

			});	
	<body>
	
		<div id="dial1"></div>
		
	</body>	
Result
Example 2
JS HTML
			$.domLoaded( function() {

				
				$.get("#dial1").widget("dialog", {
					head : { 
							title : "Closeable Dialog"
						},
					dim : { wid : 300, ht : 200},
					pos : { x : 10, y : 40},
					close : true
				});	
				
				

			});	
<body>
	
		<div id="dial1"></div>
		
	</body>	
Result
Example 3
JS HTML
			$.domLoaded( function() {

				
				$.get("#dial1").widget("dialog", {
					head : { 
							title : "Draggable Dialog"
						},
					dim : { wid : 200, ht : 200},
					pos : { x : 500, y : 40},
					draggable: true
				});
				
				$.get("#par").widget("panel", {
					dim : { wid : 400, ht : 400}
				});					

				$.get("#dial2").widget("dialog", {
					head : { 
							title : "Draggable Dialog Within Parent"
						},
					dim : { wid : 200, ht : 200},
					pos : { x : 10, y : 40},
					draggable: "parent"
				});				

			});	
	<body>
	
		<div id="dial1"></div>
		
		<div id="par">
			<div id="dial2"></div>
		</div>
		
	</body>	
Result
Example 4
JS HTML
			$.domLoaded( function() {

				
				$.get("#dial1").widget("dialog", {
					head : { 
							title : "Maximize Dialog"
						},
					dim : { wid : 200, ht : 200},
					pos : { x : 500, y : 40},
					maximize : "document",
				});
				
				$.get("#par").widget("panel", {
					dim : { wid : 400, ht : 400}
				});					

				$.get("#dial2").widget("dialog", {
					head : { 
							title : "Maximize Within Parent"
						},
					dim : { wid : 200, ht : 200},
					pos : { x : 10, y : 40},
					maximize : "parent"
				});	
			

			});	
	<body>
	
		<div id="dial1"></div>
		
		<div id="par">
			<div id="dial2"></div>
		</div>
		
	</body>	
Result
Example 5
JS HTML
			$.domLoaded( function() {

				
				$.get("#dial1").widget("dialog", {
					head : { 
							title : "Resizable Dialog"
						},
					dim : { wid : 300, ht : 200},
					pos : { x : 10, y : 40},
					resizable : true,
				});						

			});	
<body>
	
		<div id="dial1"></div>
		
	</body>	
Result
Example 6
JS HTML
			$.domLoaded( function() {

				
				$.get("#dial1").widget("dialog", {
					head : { 
							title : "Combined Dialog"
						},
					dim : { wid : 300, ht : 200},
					pos : { x : 10, y : 40},
					close : true,
					draggable : true,
					maximize : "document",
					resizable : true,	
				});			
				
			});	
<body>
	
		<div id="dial1"></div>
		
	</body>	
Result
Example 7
JS HTML
			$.domLoaded( function() {

				
				$.get("#dial1").widget("dialog", {
					head : { 
							title : "Modal Dialog"
						},
					dim : { wid : 300, ht : 200},
					pos : { x : 250, y : 50},
					resizable : true,
					draggable : true,
					close : true,
					modal : true	
				});						

			});
<body>
	
		<div id="dial1"></div>
		
	</body>	
Result
Example 8
JS HTML
			$.domLoaded( function() {

				$.get("#par").widget("panel", {
					dim : { wid : 400, ht : 400}
				});	
				
				var dial1 = $.get("#dial1").widget("dialog", {
					head : { 
							title : "External Events"
						},
					dim : { wid : 200, ht : 200},
					pos : { x : 40, y : 40},
					resizable : true,
					draggable : "parent",
					maximize : "parent",
					close : true,
					show : false,		
				});	

				$.get("#show").on("click", function() {							
					dial1.show();
				});

				$.get("#close").on("click", function() {							
					dial1.close();
				});		

				$.get("#max").on("click", function() {							
					dial1.maximize();
				});								

			});	
	<body>
	
		<input type="button" value="Show" id="show" />
		<input type="button" value="Maximize" id="max" />
		<input type="button" value="Close" id="close" />
	
		<div id="par">
			<div id="dial1"></div>
		</div>

	</body>	
Result