Tweet



 
A very easy to use, cross platform, jQuery based UI toolkit, that's still small in size, has the features you need, and doesn't get in your way of doing things! Put jQuery and jKit on all your pages and HTML becomes so much better. And the best thing? You really don't have to be a programmer to create a trully amazing website! jKit has 99% of all the features you ever need. You don't have to check out dozens of plugins, learn how to use them, only to find out they don't work in a specific browser. And even if jKit doesn't have that one feature you need right now, jKit is fully extendable with plugins and command replacements, all that and your API always stays the same.

Hi, stranger

jKit is growing almost daily, if you don't find what you need, let us know with a post on the community forum or our social pages. Hey, who knows, maybe it's already on our ToDo list.

Content Summary

jKit Button

If you like jKit, use and want to support the project, here's a small button you can use to link to the jKit website.

Btw, if you did something really nice with jKit, send us a link to your work and if we like it, we would sure love to feature it.

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

OptionValuesDefaultDescription
activeInt1The initially active tab
animation"fade", "slide" or "none"noneThe type of animation used for the transition
speedInt or "fast", "slow" (Milliseconds)250The duration of the animation in milliseconds, bigger = slower.
easingString ("linear" or easing plugin option)linearThe easing behavior of the animation

Events

EventDescription
hideentryTriggered when a tab is being hidden
hideentryNTriggered when a specific tab is being hidden where "N" is the tab index
showentryTriggered when a tab is shown
showentryNTriggered 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 ]