Tabs Widget
Tabbed containers are always handy to display more information less space. Tabs are inevitable in any UI design. tabs widget in Nedil JS provides plenty of configuring options.

Basic Usage
$.domLoaded(function() {
	
	$.get("#pan").widget("tabs", {
		tabs : [{ title : "Tab 1", id : "#tab1"},
		        { title : "Tab 2", id : "#tab2"} ],
		// Other Configurations
	});	
	
}
HTML Template for Tabs
		<div id="parent1"> 
		
			<div id="tab1"></div>
			<div id="tab2"></div>
			<div id="tab3"></div>
			
		</div>
Configuring Options
It contains array of JSON objects. The properties are mentioned below.
NameTypeMust/OptionalDescription
tabsJSONMustSets the header section
NameDescription
titleTitle of the tab
idID of the div tab element
closeCreates a closeable tab
enabledKeeps the tab disabled if set false, default is true
defDefault tab to be shown while launching
positionStringOptionalSets the tab head at top or bottom position. Default is top position. "bottom" / "top"
alignStringOptionalSets the alignment of tabs. "left" / "right" / "center"
triggerStringOptionalDenotes which event should trigger tab content display. Default is "click" event.
dimJSONOptionalSets dimension of the tabs
NameDescription
widWidth of the tabs
htHeight of the tabs
posJSONOptionalSets position of the tabs
NameDescription
xHorizontal Position
yVertical Position

Methods
NameDescription
show( tab_id )Show the tab mentioned by tab_id.
close( tab_id )Close / hides the tab mentioned by tab_id.
enable( tab_id )enables the tab mentioned by tab_id.
disable( tab_id)Disables the tab mentioned by tab_id.

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

				$.get("#parent1").widget("tabs", {
					tabs : [{ title : "First Tab",  id : "#tab1"},
							{ title : "Second Tab", id : "#tab2", def : true },
							{ title : "Third Tab",  id : "#tab3"}],		
					position : "top",
					dim : { wid : 300, ht : 200},
					pos : { x : 10, y : 40}
				});	
				
				$.get("#parent2").widget("tabs", {
					tabs : [{ title : "First Tab",  id : "#tab21"},
							{ title : "Second Tab", id : "#tab22"},
							{ title : "Third Tab",  id : "#tab23" }],		
					position : "bottom",
					dim : { wid : 300, ht : 200},
					pos : { x : 400, y : 40}
				});	

			});
		<div id="parent1"> 
			<div id="tab1">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
				Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
				<br/><br/>
				Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
				Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
			</div>
			<div id="tab2">
				Second Tab Content - Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
				Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
			</div>
			<div id="tab3">
				Third Tab Content - Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
				Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
			</div>
		</div>
		
		<div id="parent2"> 
			<div id="tab21">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
				Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
				<br/><br/>
				Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
				Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
			</div>
			<div id="tab22">
				Second Tab Content - Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
				Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
			</div>
			<div id="tab23">
				Third Tab Content - Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
				Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
			</div>
		</div>
Result
Example 2
JS HTML
			$.domLoaded( function() {

				$.get("#parent1").widget("tabs", {
					tabs : [{ title : "First Tab",  id : "#tab1"},
							{ title : "Second Tab", id : "#tab2"},
							{ title : "Third Tab",  id : "#tab3"}],		
					position : "top",
					align : "left",
					dim : { wid : 300, ht : 200},
					pos : { x : 10, y : 40}
				});	
				
				$.get("#parent2").widget("tabs", {
					tabs : [{ title : "First Tab",  id : "#tab21"},
							{ title : "Second Tab", id : "#tab22"},
							{ title : "Third Tab",  id : "#tab23" }],		
					position : "top",
					align : "center",
					dim : { wid : 300, ht : 200},
					pos : { x : 350, y : 40}
				});	
				
				$.get("#parent3").widget("tabs", {
					tabs : [{ title : "First Tab",  id : "#tab31"},
							{ title : "Second Tab", id : "#tab32"},
							{ title : "Third Tab",  id : "#tab33" }],		
					position : "top",
					align : "right",
					dim : { wid : 300, ht : 200},
					pos : { x : 10, y : 250}
				});	

			});	
		<div id="parent1"> 
			<div id="tab1">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
				Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
				<br/><br/>
				Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
				Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
			</div>
			<div id="tab2">
				Second Tab Content - Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
				Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
			</div>
			<div id="tab3">
				Third Tab Content - Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
				Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
			</div>
		</div>
		
		<div id="parent2"> 
			<div id="tab21">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
				Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
				<br/><br/>
				Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
				Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
			</div>
			<div id="tab22">
				Second Tab Content - Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
				Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
			</div>
			<div id="tab23">
				Third Tab Content - Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
				Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
			</div>
		</div>
		
		<div id="parent3"> 
			<div id="tab31">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
				Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
				<br/><br/>
				Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
				Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
			</div>
			<div id="tab32">
				Second Tab Content - Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
				Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
			</div>
			<div id="tab33">
				Third Tab Content - Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
				Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
			</div>
		</div>
Result
Example 3
JS HTML
			$.domLoaded( function() {

				$.get("#parent1").widget("tabs", {
					tabs : [{ title : "First Tab",  id : "#tab1"},
							{ title : "Second Tab", id : "#tab2", close : true},
							{ title : "Third Tab",  id : "#tab3", close : true},		
							{ title : "Fourth Tab",  id : "#tab4", enabled : false}],		
					position : "top",
					align : "left",
					dim : { wid : 500, ht : 200},
					pos : { x : 10, y : 40}
				});	
				
		});
		<div id="parent1"> 
			<div id="tab1">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
				Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
				<br/><br/>
				Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
				Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
			</div>
			<div id="tab2">
				Second Tab Content - Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
				Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
			</div>
			<div id="tab3">
				Third Tab Content - Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
				Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
			</div>
			<div id="tab4">
				Fourth Tab Content - Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
				Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
			</div>
		</div>
Result
Example 4
JS HTML
			$.domLoaded( function() {

				$.get("#parent1").widget("tabs", {
					tabs : [{ title : "First Tab",  id : "#tab1"},
							{ title : "Second Tab", id : "#tab2"},
							{ title : "Third Tab",  id : "#tab3"}],		
					position : "top",
					dim : { wid : 300, ht : 200},
					pos : { x : 10, y : 40},
					trigger : "click"
				});	
				
				$.get("#parent2").widget("tabs", {
					tabs : [{ title : "First Tab",  id : "#tab21"},
							{ title : "Second Tab", id : "#tab22"},
							{ title : "Third Tab",  id : "#tab23" }],		
					position : "top",
					dim : { wid : 300, ht : 200},
					pos : { x : 400, y : 40},
					trigger : "mouseover"
				});	

			});
		<div id="parent1"> 
			<div id="tab1">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
				Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
				<br/><br/>
				Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
				Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
			</div>
			<div id="tab2">
				Second Tab Content - Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
				Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
			</div>
			<div id="tab3">
				Third Tab Content - Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
				Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
				<br/><br/>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
				Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
			</div>
		</div>
		
		<div id="parent2"> 
			<div id="tab21">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
				Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
				<br/><br/>
				Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
				Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
			</div>
			<div id="tab22">
				Second Tab Content - Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
				Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
			</div>
			<div id="tab23">
				Third Tab Content - Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
				Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
				<br/><br/>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
				Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
				</div>
		</div>
Result
Example 5
JS HTML
			$.domLoaded( function() {

				var tab = $.get("#parent1").widget("tabs", {
					tabs : [{ title : "First Tab",  id : "#tab1"},
							{ title : "Second Tab", id : "#tab2", close : true},
							{ title : "Third Tab",  id : "#tab3", close : true},		
							{ title : "Fourth Tab",  id : "#tab4", enabled : false}],		
					position : "top",
					align : "left",
					dim : { wid : 500, ht : 200},
					pos : { x : 10, y : 100}
				});	
				
				$.get("#show").on("click", function() {
					tab.show(1);
				});
				
				$.get("#close").on("click", function() {
					tab.close(2);
				});
				
				$.get("#enab").on("click", function() {
					tab.enable(3);
				});
				
				$.get("#disb").on("click", function() {
					tab.disable(3);
				});
				
		});
		<input type="button" id="show" value="Show Tab 2" />
		<input type="button" id="close" value="Close Tab 3" />
		<input type="button" id="enab" value="Enable Tab 4" />
		<input type="button" id="disb" value="Disable Tab 4" />
		
		<div id="parent1"> 
			<div id="tab1">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
				Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
				<br/><br/>
				Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
				Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
			</div>
			<div id="tab2">
				Second Tab Content - Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
				Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
			</div>
			<div id="tab3">
				Third Tab Content - Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
				Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
			</div>
			<div id="tab4">
				Fourth Tab Content - Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
				Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
			</div>
		</div>
Result