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.

Basics

Learn how simple it is to use jKit, you definitely don't have to be a programmer!

Including the library

					<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
					<script type="text/javascript" src="jquery.jkit.1.2.16.min.js"></script>
					
					<script type="text/javascript">
					$(document).ready(function(){
						$('body').jKit();
					});
					</script>
				

Basic Usage (HTML)

jKit uses the the "data-jkit" attribute to inject it's functionality into your html. If you don't want, you don't have to use JavaScript, at all!

data-jkit="[slideshow:interval=4000;speed=250;animation=fade]"

Let's have a closer look at what's inside the attribute:

data-jkit="[command:option=value;anotheroption=anothervalue][anothercommand]"

The first thing is always the jKit command which you want to execute. In the first example we're using the slideshow command. If you don't want to use your own command options, than that's all you have to do. If you want to use your own options, add a doublepoint followed by your options like this:

data-jkit="[command:option1=value1;option2=value2;option3=value3]"

In most cases you just add one command to a HTML element, but sometimes you want to add more, and that's exactly why we have the brackets! Here's an example with two commands:

data-jkit="[split:container=span][cycle:what=css.color;where=span;sequence=,,,#f30]"

Here's a complete example with the random command. Inside a div element we have four paragraphs and want to only show three of them, randomly chosen:

					

Text 1

Text 2

Text 3

Text 4

And to illustrate two commands on one single element, we create a slideshow from those three randomly selected paragraphs:

					

Text 1

Text 2

Text 3

Text 4

It's that easy! You can even have jKit stuff inside jKit stuff as in the following example where we put lorem ipsum text into the paragraphs:

					

If you want you can put spaces and even linebreaks between the options to make it more readable, for example like this:

					

In one of our tests, we put a slideshow into a tab navigation, into an accordion, into another accordion and a last accordion. It's been working great!

In our first versions of jKit, we abused the rel attribute to execute the commands, you can still do that, but we think you should better use the HTML 5 doctype together with the data-jkit attribute. Anyway, if you really want to use the rel attribute, here's how:

					

Basic Usage (JavaScript)

You can execute all jKit commands with JavaScript, too. This is not the prefered way, but sometimes you have to do it and this is how:

					$('#someElement').jKit('yourCommand', { 'option1': value1, 'option2': 'value2' });
				

The problem with this method is that you open a new context with each call. This is nice and well if you just want to do basic stuff, but as soon as you want to use the event system or commands like the lightbox that sometimes want to know of what else is in the same context, you run into problems. You can work around this however, here's an example:

					$('body').jKit();
					$('a.gallery').each( function(){
					    $('body').data('jKit').executeCommand(this, 'lightbox', { 
					        'closer': '', 
					        'prev': '', 
					        'next': '', 
					        'group': 'images' 
					    });	
					});
				

jKit Cheat Sheet

To get an overview of each command, we've created a cheat sheet that shows each command with all individual options. Mouseover the different parts to get more info.

jKit Cheat Sheet

CSS Styling

Some of the more visual commands need additional CSS styling to work correctly. Check out the CSS on this page to get a starting style to work on. jKit doesn't have a theming system, the styling is completely up to you. This gives you more freedom, but at the same time more responsibility, as well.

More ...

This was actually just a small part of how you can use the jKit API, much more about it in the advanced introduction. But most importantly, have a look at each command and the examples and even more important, try it out on your own. Have fun!