How to create dialog widgets in Nedil JS

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.

Name

Type

Must/Optional

Description

head

JSON

Optional

Sets the header section

Name	Description
title	Title of the Dialog

Boolean

Optional

Enables the close option of dialog and close button

maximize

Boolean / JSON

Optional

Enables the maximizable option of dialog.

Name	Description
parent	Maximize will happen to the size of dialog's parent
document	Maximize will happen to the document's view size

modal

Boolean

Optional

Creates a modal dialog. Other UI componenets will be inaccessible till the modal dialog is closed

layout

String

Optional

Sets the layout of child elements. Allowed values are "horizontal" and "vertical"

dim

JSON

Optional

Sets dimension of the dialog

Name	Description
wid	Width of the dialog
ht	Height of the dialog

pos

JSON

Optional

Sets position of the dialog

Name	Description
x	Horizontal Position
y	Vertical Position

draggable

Boolean / String

Optional

Makes the dialog draggable

Valye	Description
true	Makes the dialog draggable anywhere
"parent"	Makes the dialog draggable within the parent
"x"	Only Horizontal drag
""y""	Only Vertical drag

handle

Nedil.Objs

Optional

A Child element which acts as the handle for dialog drag movement

dragRangeX

JSON

Optional

"x" axis drag movement can be restricted

Name	Description
min	Minimum X value
max	Maximum X value

dragRangeY

JSON

Optional

"y" axis drag movement can be restricted

Name	Description
min	Minimum Y value
max	Maximum Y value

nostyle

Boolean

Optional

Removes the default styling of a dialog by Nedil

resizable

String

Optional

Makes a dialog resizable

minSize

JSON

Optional

dialog cannot be resized smaller than the specified values

Name	Description
wid	Min Width of the dialog
ht	Min Height of the dialog

maxSize

JSON

Optional

dialog cannot be resized bigger than the specified values

Name	Description
wid	Max Width of the dialog
ht	Max Height of the dialog

show

JSON

Optional

Turns off the default display of dialogs

Methods

Name	Description
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

JSHTML
									$.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

JSHTML
									$.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

JSHTML
									$.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

JSHTML
									$.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

JSHTML
									$.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

JSHTML
									$.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

JSHTML
									$.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

JSHTML
									$.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