How to create panel widgets in Nedil JS

Panel Widget

Panel widget is a container. It can hold other user interface elements in an organized way. It support horizontal and vertical layout of it's child elements. Panel can be made draggable and resizable. There are plenty of configuration options for panel.

Basic Usage

$.domLoaded(function() {
	
	$.get("#pan").widget("panel", CONFIG_JSON );	
	
}

Configuring Options

It contains array of JSON objects. The properties are mentioned below.

Name

Type

Must/Optional

Description

layout

String

Optional

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

dim

JSON

Optional

Sets dimension of the panel

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

pos

JSON

Optional

Sets position of the panel

Name	Description
x	Horizontal Position
y	Vertical Position

draggable

Boolean / String

Optional

Makes the panel draggable

Valye	Description
true	Makes the panel draggable anywhere
"parent"	Makes the panel 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 panel 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 panel by Nedil

resizable

String

Optional

Makes a panel resizable

minSize

JSON

Optional

Panel cannot be resized smaller than the specified values

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

maxSize

JSON

Optional

Panel cannot be resized bigger than the specified values

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

Panel Widget Examples Example 1

JSHTML
									$.domLoaded( function() {			
				
				$.get("#pan1").widget("panel", {
					layout : "vertical",
					dim : { wid : 380, ht : 150},
				});	

				$.get("#pan2").widget("panel", {
					layout: "horizontal",
					dim : { wid : 380, ht : 150}
				});	
								
				$.get(".uname").widget("textbox", {
					watermark : "Username",
					validation : "alphanumeric"
				});
				
				$.get(".email").widget("textbox", {
					watermark : "Email",
					validation : "email"
				});
					
				$.get(".btn").widget("button", {
					text : "Log In"
				});				
				
			});
					

							<body>
	
		<div id="pan2">
			<h3>Horizontal Layout</h3>
			<input type="text" class="uname"/>
			<input type="text" class="email"/>
			<div class="btn" ></div> 
		</div>
		<br/>
		<div id="pan1" >
			<h3>Vertical Layout</h3>
			<input type="text" class="uname"/>
			<input type="text" class="email"/>
			<div class="btn" ></div> 
		</div>

	</body>	

					

Result

Example 2

JSHTML
									$.domLoaded( function() {			
				
				$.get("#pan1").widget("panel", {
					layout : "vertical",
					dim : { wid : 200, ht : 200},
					pos : { x : 0 , y : 100 }
				});	

				$.get("#pan2").widget("panel", {
					layout: "horizontal",
					dim : { wid : 200, ht : 200},
					pos : { x : 300 , y : 0 }
				});	
								
			});
					

							<body>
			
		<div id="pan1">Panel1</div>
		<div id="pan2">Panel2</div>
		
	</body>	
					

Result

Example 3

JSHTML
									$.domLoaded( function() {			
				
				$.get("#pan1").widget("panel", {
					draggable : true,
					dim : { wid : 100, ht : 100}					
				});		
				
				$.get("#pan4").widget("panel", {
					draggable : "parent",
					dim : { wid : 100, ht : 100}					
				});								
				
			});
					

							<body>
		
		<div id="pan1"></div>
		
		<div id="parent">
			<div id="pan4"></div>
		</div>		
		
	</body>	
					

Result

Example 4

JSHTML
									$.domLoaded( function() {			
							
				$.get("#pan2").widget("panel", {
					draggable : "x",
					dim : { wid : 100, ht : 100}					
				});				
				
				$.get("#pan3").widget("panel", {
					draggable : "y",
					dim : { wid : 100, ht : 100}					
				});							
				
			});
					

							<body>
			
		<div id="pan3"></div>
		
		<div id="pan2"></div>
		
	</body>	
					

Result

Example 5

JSHTML
									$.domLoaded( function() {							
				
				$.get("#pan3").widget("panel", {
					draggable : true,
					dim : { wid : 150, ht : 150},
					handle : $.get("#pan3 h3")
				});							
				
			});
					

							<body>
			
		<div id="pan3">
			<h3> </h3>
		</div>
		
	</body>	
					

Result

Example 6

JSHTML
									$.domLoaded( function() {							
				
				$.get("#pan3").widget("panel", {
					draggable : true,
					dim : { wid : 100, ht : 100},
					dragRangeX : { min : 10 , max : 400},
					dragRangeY : { min : 50 , max : 200}					
				});							
				
			});
					

							<body>
			
		<div id="pan3"></div>
		
	</body>	
					

Result

Example 7

JSHTML
									$.domLoaded( function() {			
				
				$.get("#pan1").widget("panel", {
					nostyle : true,
					draggable : true,
					dim : { wid : 200, ht : 150}					
				});				
				
			});
					

							<body>
		
		<div id="pan1" style="border: 1px solid red"></div>
		
	</body>	
					

Result

Example 8

JSHTML
									$.domLoaded( function() {							
				
				$.get("#pan3").widget("panel", {
					resizable : true,
					dim : { wid : 100, ht : 100}				
				});							
				
			});
					
							<body>
			
		<div id="pan3"></div>
		
	</body>

Result

Example 9

JSHTML
									$.domLoaded( function() {							
				
				$.get("#pan3").widget("panel", {
					resizable : true,
					dim : { wid : 100, ht : 100},
					minSize : { wid : 50 , ht : 50},
					maxSize : { wid : 200, ht : 200}
				});							
				
			});
					

							<body>
			
		<div id="pan3"></div>
		
	</body>
					

Result