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.
NameTypeMust/OptionalDescription
layoutStringOptionalSets the layout of child elements. Allowed values are "horizontal" and "vertical"
dimJSONOptionalSets dimension of the panel
NameDescription
widWidth of the panel
htHeight of the panel
posJSONOptionalSets position of the panel
NameDescription
xHorizontal Position
yVertical Position
draggableBoolean / StringOptionalMakes the panel draggable
ValyeDescription
trueMakes the panel draggable anywhere
"parent"Makes the panel draggable within the parent
"x"Only Horizontal drag
""y""Only Vertical drag
handleNedil.ObjsOptionalA Child element which acts as the handle for panel 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 panel by Nedil
resizableStringOptionalMakes a panel resizable
minSizeJSONOptionalPanel cannot be resized smaller than the specified values
NameDescription
widMin Width of the panel
htMin Height of the panel
maxSizeJSONOptionalPanel cannot be resized bigger than the specified values
NameDescription
widMax Width of the panel
htMax Height of the panel


Panel Widget Examples Example 1
JS HTML
			$.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
JS HTML
			$.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
JS HTML
			$.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
JS HTML
			$.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
JS HTML
			$.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
JS HTML
			$.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
JS HTML
			$.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
JS HTML
			$.domLoaded( function() {							
				
				$.get("#pan3").widget("panel", {
					resizable : true,
					dim : { wid : 100, ht : 100}				
				});							
				
			});
	<body>
			
		<div id="pan3"></div>
		
	</body>	
Result
Example 9
JS HTML
			$.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