|
|
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.
| Name | Type | Must/Optional | Description |
|---|
| tabs | JSON | Must | Sets the header section
| Name | Description |
|---|
| title | Title of the tab |
| id | ID of the div tab element |
| close | Creates a closeable tab |
| enabled | Keeps the tab disabled if set false, default is true |
| def | Default tab to be shown while launching |
|
| position | String | Optional | Sets the tab head at top or bottom position. Default is top position. "bottom" / "top" |
| align | String | Optional | Sets the alignment of tabs. "left" / "right" / "center" |
| trigger | String | Optional | Denotes which event should trigger tab content display. Default is "click" event.
|
| dim | JSON | Optional | Sets dimension of the tabs
| Name | Description |
|---|
| wid | Width of the tabs |
| ht | Height of the tabs |
|
| pos | JSON | Optional | Sets position of the tabs
| Name | Description |
|---|
| x | Horizontal Position |
| y | Vertical Position |
|
Methods
| Name | Description |
|---|
| 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>
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>
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>
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>
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>
|
