Tabs command
Create a tab navigation for inline content.
Basic Usage (HTML)
data-jkit="[tabs:animation=slide]"
Advanced Init (JavaScript)
$('#myelement').jKit('tabs', { 'animation': 'slide' });
Options
| Option | Values | Default | Description |
|---|---|---|---|
| active | Int | 1 | The initially active tab |
| animation | “fade”, “slide” or “none” | none | The type of animation used for the transition |
| speed | Int or “fast”, “slow” (Milliseconds) | 250 | The duration of the animation in milliseconds, bigger = slower. |
| easing | String (“linear” or easing plugin option) | linear | The easing behavior of the animation |
Events
| Event | Description |
|---|---|
| hideentry | Triggered when a tab is being hidden |
| hideentryN | Triggered when a specific tab is being hidden where “N” is the tab index |
| showentry | Triggered when a tab is shown |
| showentryN | Triggered when a specific tab is shown where “N” is the tab index |
Examples
Basic example:
A basic tab navigation:
Tab 1
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Tab 2
At vero eos et accusam et justo duo dolores et ea rebum.
Tab 3
Duo dolores et ea rebum.
Source:
<div class="tabs" style="width:100%" data-jkit="[tabs:animation=none]"> <div> <h3>Tab 1</h3> <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</div> </div> <div> <h3>Tab 2</h3> <div>At vero eos et accusam et justo duo dolores et ea rebum.</div> </div> <div> <h3>Tab 3</h3> <div>Duo dolores et ea rebum.</div> </div> </div>
Advanced example:
A tab navigation that contains other jKit stuff:
Some lorem text
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
jKit Slideshow
A list
- List Item 1
- List Item 2
- List Item 3
jKit Parallax
Background Layer
Middle Layer
Foreground Layer
Source:
<div class="tabs" style="width:100%;" data-jkit="[tabs:animation=none]"> <div> <h3>Some lorem text</h3> <div data-jkit="[lorem:paragraphs=2]">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</div> </div> <div> <h3>jKit Slideshow</h3> <div> <div id="mydiv7" data-jkit="[slideshow:interval=4000;speed=250;animation=fade]"> <a href="http://fredibach.ch" target="_blank"><img src="../img/slides/p1.jpg"></a> <a href="http://fredibach.ch" target="_blank"><img src="../img/slides/p2.jpg"></a> <a href="http://fredibach.ch" target="_blank"><img src="../img/slides/p3.jpg"></a> <a href="http://fredibach.ch" target="_blank"><img src="../img/slides/p4.jpg"></a> <a href="http://fredibach.ch" target="_blank"><img src="../img/slides/p5.jpg"></a> </div> </div> </div> <div> <h3>A list</h3> <div><ul><li>List Item 1</li><li>List Item 2</li><li>List Item 3</li></ul></div> </div> <div> <h3>jKit Parallax</h3> <div> <div class="parallax-container" data-jkit="[parallax:strength=2;axis=x]"> <div class="parallax parallax1">Background Layer</div> <div class="parallax parallax2">Middle Layer</div> <div class="parallax parallax3">Foreground Layer</div> </div> </div> </div> </div>
Example CSS
.tabs > ul, .tabs > ul li {
list-style: none;
margin: 0px;
padding: 0px;
overflow: hidden;
}
.tabs > ul li {
float: left;
margin-left: 10px;
padding: 3px;
padding-bottom: 1px;
padding-left: 16px;
padding-right: 16px;
background: #fff;
color: #000;
}
.tabs > ul li.active, .tabs > ul li:hover {
background: #333;
color: #fff;
}
.tabs > div {
border-top: 1px #333 solid;
padding-top: 8px;
}
Replacements
There are currently no replacements for this command.
[ Learn more about replacements ]
Discussions
Do you have questions or do you want to suggest new features? Than head over to our new community:
[ jKit Community ]