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.

Cheat Sheet

An overview of every command with all their default options.

Command Default optionsEvents
binding:selector= ; source=val; search= ; variable= ; mode=text; interval=100; math= ;  ; if= ; else= ; 0; easing=linear; trigger=no; accuracy= ; min= ; max= ; applyto= ; delay=0true, false
template:action=set; name=template; dynamic=no; addhtml=+added
lightbox:speed=500; opacity=0.7; clearance=200; closer=x; next=>; prev=<; modal=no; width= ; height= ; titleHeight=20; group= clicked
slideshow:shuffle=no; interval=3000; speed=250; animation=fade; easing=linear; on= hideentry, hideentryN, showentry, showentryN
gallery:active=1; event=click; showcaptions=yes; animation=none; speed=500; easing=linear; lightbox=nohideentry, showentry, showentryN
tabs:active=1; animation=none; speed=250; easing=linearhideentry, hideentryN, showentry, showentryN
accordion:active=1; animation=slide; speed=250; easing=linear
carousel:autoplay=yes; limit=5; animation=grow; speed=250; easing=linear; interval=5000; prevhtml=<; nexthtml=>shownext, showprev
parallax:strength=5; axis=x; scope=global; detect=mousemove
ticker:speed=100; delay=2000; loop=yesshowentry, showentryN
cycle:what=class; where=li; scope=children; sequence=odd,even
animation:fps=25; loop=no; delay=0; speed=500; easing=linear; from= ; to= ; on= ; macro= complete, showframe, showframeN
zoom:scale=2; speed=150; lightbox=nozoomin, zoomout
tooltip:text= ; content= ; color=#fff; background=#000; classname= ; follow=no; event=mouse; yoffset=20open, closed
paginate:limit=25; by=node; container= ; pos=after; animation=none; speed=250; easing=linearshowpage, showpageN
sort:what=text; by= ; start=0; end=0clicked, complete
filter:by=class; affected= ; logic=and; speed=250; animation=fade; easing=linear; global=no; loader= clicked, complete
form:validateonly=no; error= ; success= ; macro= complete, error
validate:type= ; required=false; error= ; min= ; max= ; length= ; bigger= ; smaller= ; older= ; younger= ; longer= ; shorter= ; strength= ; same= ; different= ; options= ; checkfunction= 
ajax:animation=slide; speed=250; easing=linear; when=click; href= ; src= ; macro= complete
chart:max=0; delaysteps=100; speed=500; easing=linearcomplete
plugin:script= ; option= complete
api:format=json; value= ; url= ; interval=-1; macro= ; template= error, complete
scroll:speed=500; dynamic=yes; easing=linear; offset=0clicked, complete
partially:height=200; text=more …; speed=250; easing=linear; on= ; area=element; alphaon=0.9; alphaoff=0open, closed
summary:what= ; linked=yes; from= ; scope=children; style=ul; indent=no
limit:elements=children; count=5; animation=node; speed=250; easing=linear; endstring=complete
hide:delay=0; speed=500; animation=fade; easing=linearcomplete
show:delay=0; speed=500; animation=fade; easing=linearcomplete
showandhide:delay=0; speed=500; duration=10000; animation=fade; easing=linearshown, complete
loop:speed1=500; speed2=500; duration1=2000; duration2=2000; easing1=linear; easing2=linear; animation=fadeshow, hide
random:count=1; remove=yes
encode:format=code; fix=yes
split:separator= ; container=span; before= ; after= 
key:code= ; macro= pressed
replace:modifier=g; search= ; replacement= 
fontsize:steps=2; min=6; max=72; affected=p; style=font-sizechanged
swap:versions=_off,_on; attribute=srcactive, inactive
lorem:paragraphs=0; length= ; random=no

Special commands

The following commands have limited special uses:

Command Default options
repeat:onevent= ; delay=0