jKit

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!

Demos

Get the full demos and documentation over here: jquery-jkit.com

Binding

Bind different things to other things. Only your imagination sets the limit.

Body css.width:

klfhdkljsfhg jdfjg dfjhg jfdhgs djhgjh dsfhg jdfhsgjk hfjkghs djkfhgkfldshjfgh dfskjhg kfdhgsk kjls v cb fsgbh g bf gb gfsh ff gh h ft h dfg hgfdh gfd h hgf dh gf dh fgd df sd fa df as d f asd fdsafdsadfdfa dfsafdsa f dfsa ffdsa fsd f ds f sd af dsf

dhf kljdhgsjklfhglkfd shg ksl

fhjkldgh fdhgjlfdhs gdfhjg hfsdjhg jfdshg jfhdjls hgjh ghfdsjö hfk fg sdf g fd gs fg s f dfgsdg dfgs fd g fds gdfsg fd s fgd sfgdfsgfds fgdsgfds

dhf kljdhgsjklfhglkfd shg ksl

fhjkldgh fdhgjlfdhs gdfhjg hfsdjhg jfdshg jfhdjls hgjh ghfdsjö hfk fg sdf g fd gs fg s f dfgsdg dfgs fd g fds gdfsg fd s fgd sfgdfsgfds fgdsgfds

Paragraph with content:

dfsadf dsf sdf dsf dsafsdf sdaf dsf dsafsda

Paragraph without content:

Click me!

Test the test test

Two testtest

Only one test

viewport detecting box

Testlinks: test, example, whatever

#test

#example

Testlinks: test, example, whatever

#test2

#example2

Respond

Add some lorem filltext to your site for testing.

widget code

[ This box is at least 250 wide ]

[ This box is at least 500 wide ]

[ This box is at least 750 wide ]

Template

Reduce repetition and load times of your page with our little templating engine.

List Entry 1

250 character jKit lorem
List Entry 2

350 character jKit lorem
List Entry 3

150 character jKit lorem
List Entry 4

2 paragraph jKit lorem
List Entry 5

Without text (removed paragraph) ...

Background

Do you need an image that scales to the whole of the browser window, at all times? With or without distortion? Than this one's for you.

Lightbox

Open images, or html documents in a lightbox or modal window.

Open image Oversized image Open square image Open website (iFrame) Modal dialog (iFrame)

Slideshow

Create slideshows of images or other HTML elements, even linked ones.

First Headline

Another Headline

Even More of a Headline

Still not the last headline

The last headline

Gallery

Create a tab navigation for inline content.

Tabs

Create a tab navigation for inline content.

Tab 1

Tab 2

At vero eos et accusam et justo duo dolores et ea rebum.

Tab 3

Duo dolores et ea rebum.

Some lorem text

jKit Slideshow

A list

List Item 1
List Item 2
List Item 3

jKit Parallax

Background Layer

Middle Layer

Foreground Layer

Accordion

Create an accordion style inline content navigation.

Title 1

Text 1

Title 2

Text 2

Title 3

Text 3

Title 1

Title 2

Title 3

List Item 1
List Item 2
List Item 3

Title 1

Subtitle 1

Subsubtitle 1

Subsubtext 1

Subsubtitle 2

Subsubtext 2

Subtitle 2

Subtext 2

Subtitle 3

Subtext 3

Title 2

Text 2

Title 3

Text 3

Carousel

Make content go around and around ... and around.

DIV 1 ...

DIV 2 ...

DIV 3 ...

DIV 4 ...

DIV 5 ...

DIV 6 ...

DIV 7 ...

Parallax

This command lets you create a parallax effect of different layers triggered by mouse movement.

Background Layer

Middle Layer

Foreground Layer

Background Layer

Middle Layer

Foreground Layer

Background Layer

Middle Layer

Foreground Layer

Background Layer

Middle Layer

Foreground Layer

Background Layer

Middle Layer

Foreground Layer

Ticker

Create a news ticker from a list of entries.

Cycle

Maske it easy to cycle through a sequence of different elements to style them differently.

List entry 1
List entry 2
List entry 3
List entry 4
- Sub entry 1
- Sub entry 2
- Sub entry 3
List entry 5

List entry 1
List entry 2
List entry 3
List entry 4
- Sub entry 1
- Sub entry 2
- Sub entry 3
List entry 5

List entry 1
List entry 2
List entry 3
List entry 4
- Sub entry 1
- Sub entry 2
- Sub entry 3
List entry 5

List entry 1
List entry 2
List entry 3
List entry 4
- Sub entry 1
- Sub entry 2
- Sub entry 3
List entry 5

This is some example text, it will look like a rainbow ... hopefully.

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Animation

Tween between different elements (frames) to create an animation.

After four seconds ...

On click ...

On mouseenter and mouseleave ...

animation

made

easy

really easy!

Zoom

Zoom into an image on mouseover.

Tooltip

Show additional information on hovering a link.

Test Link Test Link 2 Test Link with a class for styling

Content from a hidden div Text from title attribute Text from alt attribute Follow the mouse

Paginate

Lets you create paginated content.

Name	Location	Birthday	Category	Status	Superior	Price (CHF)
Mr. Max Keller	CH-7278 Davos Monstein	1-29-1986	freelancer	active	#120	1.00
Ms. Sophia Roth	CH-3186 Düdingen	2-16-1955	freelancer	active	#120	25.25
Mr. Fredi Baumann	CH-6543 Arvigo	11-21-1993	freelancer	active		2.99
Ms. Hannah Zimmermann	LI-9493 Mauren	6-26-1967	freelancer	active	#1168	48.95
Ms. Maja Brunner	D-21207 Seevetal	10-22-1934	trainee	active	#120	200.10
Mr. Tom Fischer	LI-9492 Eschen	5-19-1955	freelancer	inactive	#1168	-5.05
Mr. Kon Fischer	LI-9492 Eschen	5-19-1955	freelancer	inactive	#1168	-5.05
Ms. Alina Gerber	D-21710 Engelschoff	10-15-1981	employee	active	#1168	10
Mr. Tim Gerber	CH-6543 Arvigo	12-8-1943	freelancer	active	#120	4721.45
Mr. Felix Meier	LI-9486 Schaanwald	8-26-1975	guest	active	#120	12.55
Mr. Fredi Müller	LI-9486 Schaanwald	10-24-1953	trainee	active	#120	354.50
Mr. Tim Gerber	CH-1773 Léchelles	12-25-1966	freelancer	active		42.85
Ms. Lilli Meyer	D-21207 Seevetal	11-29-1938	guest	active		87.41
Ms. Emilie Fischer	D-04299 Leipzig	11-7-1942	freelancer	active	#463	354.01
Mr. Fredi Graf	CH-6534 S. Vittore	12-7-1971	employee	active	#120	14.12
Ms. Cordelia Weber	CH-6543 Arvigo	2-23-1967	employee	active	#120	10.25

jh sdgjkgh fjdhsgdfjkhgfjkdhsg jhjksdgh fjkdhg jkfdshjkg jkfdh sgjkhfdjkshg fjhgjkfhdjsghjksh g
hdjh gjkdfhgj khfdjkgha jfhgkj gdsalhd f
j dsfjk hdjf gdshafg hdsgfa hjhdfg sdhjgfjh dsfahj ghdfg dsahgfhjsdfgh ab
j dhsfkajhdj fghjkdhg ajfhjghd sjhagjjkhgfjdh gjkhdfjkahgj
dh safhjkl hgfdjhasjdkghjhdajkhg jdfh gahjkd hsajghj fghadfjk hjgkh jkhg dfa
d skhafmh gjhdfjka ghjghjk dashjgjkhf adhfg jdhajk sg
d sfhajhdjfhjsda gjh jl
d shfjklh djkahfgjk dajksghjkghadsj jkgh jdashjk ghjksadg jgh ljhdjgks ad sjhaflkhf jkadghjh gjklhdgajhkjljksagl asdg
d dhjsfga hjgdsagads jdsha hfj hj salhfjd shakhfd jkahsd fjkdsagfjkgfdjhsagl fjhgsda l
jj sakdflh jkh djkhfjdsajhf jdsfhgdshfhjdfh jkhdsjd sfagjklg dfsjajdgjkgdsajkl jdas gljkds akl
dmh safhgjk dashjf kgjkfgd sajkgfjk sdjhgf lsdagjk gfjkdas gfg asd
jgajs fgjk

Sort

Let visitors sort table rows by their columns.

Name	Location	Birthday	Category	Status	Superior	Price (CHF)
Mr. Max Keller	CH-7278 Davos Monstein	1-29-1986	freelancer	active	#120	1.00
Ms. Sophia Roth	CH-3186 Düdingen	2-16-1955	freelancer	active	#120	25.25
Mr. Fredi Baumann	CH-6543 Arvigo	11-21-1993	freelancer	active		2.99
Ms. Hannah Zimmermann	LI-9493 Mauren	6-26-1967	freelancer	active	#1168	48.95
Ms. Maja Brunner	D-21207 Seevetal	10-22-1934	trainee	active	#120	200.10
Mr. Tom Fischer	LI-9492 Eschen	5-19-1955	freelancer	inactive	#1168	-5.05
Ms. Alina Gerber	D-21710 Engelschoff	10-15-1981	employee	active	#1168	10
Mr. Tim Gerber	CH-6543 Arvigo	12-8-1943	freelancer	active	#120	4721.45
Mr. Felix Meier	LI-9486 Schaanwald	8-26-1975	guest	active	#120	12.55
Mr. Fredi Müller	LI-9486 Schaanwald	10-24-1953	trainee	active	#120	354.50
Mr. Tim Gerber	CH-1773 Léchelles	12-25-1966	freelancer	active		42.85
Ms. Lilli Meyer	D-21207 Seevetal	11-29-1938	guest	active		87.41
Ms. Emilie Fischer	D-04299 Leipzig	11-7-1942	freelancer	active	#463	354.01
Mr. Fredi Graf	CH-6534 S. Vittore	12-7-1971	employee	active	#120	14.12
Ms. Cordelia Weber	CH-6543 Arvigo	2-23-1967	employee	active	#120	10.25

Name	Location	Birthday	Category	Status	Superior	Price (CHF)
Mr. Max Keller	CH-7278 Davos Monstein	1-29-1986	freelancer	active	#120	1.00
Ms. Sophia Roth	CH-3186 Düdingen	2-16-1955	freelancer	active	#120	25.25
Mr. Fredi Baumann	CH-6543 Arvigo	11-21-1993	freelancer	active		2.99
Ms. Hannah Zimmermann	LI-9493 Mauren	6-26-1967	freelancer	active	#1168	48.95
Ms. Maja Brunner	D-21207 Seevetal	10-22-1934	trainee	active	#120	200.10
Mr. Tom Fischer	LI-9492 Eschen	5-19-1955	freelancer	inactive	#1168	-5.05
Ms. Alina Gerber	D-21710 Engelschoff	10-15-1981	employee	active	#1168	10
Mr. Tim Gerber	CH-6543 Arvigo	12-8-1943	freelancer	active	#120	4721.45
Mr. Felix Meier	LI-9486 Schaanwald	8-26-1975	guest	active	#120	12.55
Mr. Fredi Müller	LI-9486 Schaanwald	10-24-1953	trainee	active	#120	354.50
Mr. Tim Gerber	CH-1773 Léchelles	12-25-1966	freelancer	active		42.85
Ms. Lilli Meyer	D-21207 Seevetal	11-29-1938	guest	active		87.41
Ms. Emilie Fischer	D-04299 Leipzig	11-7-1942	freelancer	active	#463	354.01
Mr. Fredi Graf	CH-6534 S. Vittore	12-7-1971	employee	active	#120	14.12
Ms. Cordelia Weber	CH-6543 Arvigo	2-23-1967	employee	active	#120	10.25

Filter

Dynamically filter your content and only show what's currently needed

Entry 1 ... (test1)
Entry 2 ... (test2)
Entry 3 ... (test3)
Entry 4 ... (test2 long)
Entry 5 ... (test1 long)
Entry 6 ... (test3)
Entry 7 ... (test2)
Entry 8 ... (test1 test3)
Entry 9 ... (test1 test2)
Entry 10 ... (test99)

Search: (try searching for "Gerber")

Name	Location	Birthday
Mr. Max Keller	CH-7278 Davos Monstein	1-29-1986
Ms. Sophia Roth	CH-3186 Düdingen	2-16-1955
Mr. Fredi Baumann	CH-6543 Arvigo	11-21-1993
Ms. Hannah Zimmermann	LI-9493 Mauren	6-26-1967
Ms. Maja Brunner	D-21207 Seevetal	10-22-1934
Mr. Tom Fischer	LI-9492 Eschen	5-19-1955
Ms. Alina Gerber	D-21710 Engelschoff	10-15-1981
Mr. Tim Gerber	CH-6543 Arvigo	12-8-1943
Mr. Felix Meier	LI-9486 Schaanwald	8-26-1975
Mr. Fredi Müller	LI-9486 Schaanwald	10-24-1953
Mr. Tim Gerber	CH-1773 Léchelles	12-25-1966
Ms. Lilli Meyer	D-21207 Seevetal	11-29-1938
Ms. Emilie Fischer	D-04299 Leipzig	11-7-1942
Mr. Fredi Graf	CH-6534 S. Vittore	12-7-1971
Ms. Cordelia Weber	CH-6543 Arvigo	2-23-1967

Form

Create an ajax submitted form.

Validate

Validate form values in many different ways.

Ajax

Easely convert normal href links into ajax links.

Link 1, Link 2

Initial text ...

Chart

Create animated bar charts from tabular data.

Year	Jan.	Feb.	Mar.	Apr.	Mai	Jun.	Jul.	Aug.	Sep.	Okt.	Nov.	Dez.
2011	500	124	254	124	245	233	125	147	189	156	164	144
2012	214	124	127	452	421	12	127	189	145	123	741

Plugin

Use a jQuery plugin the same way as your other jKit commands with the help of this command.

API

Easely gather data from external API's.

Twitter count:
Facebook shares:

Latest jKit commit:

loading ...

Scroll

Smoothly scroll to an anchor or the top of the page.

To the top! To the options anchor. 100 pixels above the options anchor.

Partially

Hide part of an element that exceeds a specific size and make it unhidable.

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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Summary

Create a summery, linked or not, of a content area

Test headline 1

Test headline 2

Test sub headline 1

Test headline 3

Test headline 4

Limit

Limit the number of entries in a list or the number of characters in a string.

Entry 1
Entry 2
Entry 3
Entry 4

1234567890123456789012345678901234567890123456789

Hide

Hide something at a specific time after pageload, and animated if needed.

Text ...

Remove

Completely remove something from the page after a delay.

Text ...

Show

Show something at a specific time after pageload, and animated if needed.

Text ...

Box 1

Box 2

Box 3

Box 4

Box 5

Box 6

Box 7

Box 8

Box 9

Box 10

Showandhide

Show something and then hide it again. You have full control over the specifics.

Text ...

Loop

The new blink tag, just animated. Use it on your own risk.

Text ...

Box 1

Box 2

Box 3

Box 4

Box 5

Box 6

Box 7

Box 8

Box 9

Box 10

Random

Randomly choose one or more elements from a selection of elements.

Text 1 (red)

Text 2 (green)

Text 3 (blue)

Encode

A simple command to encode the content of an element, especially usefull for pre and code elements.

Encode

Encode

Split

Split a string into DOM elements.

Sun, Stars, Moon, Asteroid

Live

Update the source of an image or an iframe periodically, great for webcam images.

Key

Add keyboard shortcuts to links.

Replace

Replace existing content with new content, based on simple strings or regexes.

Hi, my name is Fredi. I'm a programmer. Fredi is also a designer.

This product costs 123 dollars more than the other product that costs just 77 dollars.

Swap

Swap an image with an automatically preloaded replacement.

Lorem

Add some lorem filltext to your site for testing.

jKit

Demos

Binding

Respond

Template

Info Text Title: "Heading Text"

List Entry 1

List Entry 2

List Entry 3

List Entry 4

List Entry 5

Background

Lightbox

Slideshow

First Headline

Another Headline

Even More of a Headline

Still not the last headline

The last headline

Gallery

Tabs

Tab 1

Tab 2

Tab 3

Some lorem text

jKit Slideshow

A list

jKit Parallax

Accordion

Title 1

Title 2

Title 3

Title 1

Title 2

Title 3

Title 1

Subtitle 1

Subsubtitle 1

Subsubtitle 2

Subtitle 2

Subtitle 3

Title 2

Title 3

Carousel

Parallax

Ticker

Cycle

Animation

Zoom

Menu

Tooltip

Header

Paginate

Sort

Filter

Form

Validate

Ajax

Chart

Plugin

API

Scroll

Partially

Summary

Test headline 1

Test headline 2

Test sub headline 1

Test headline 3

Test headline 4

Limit

Hide

Remove

Show

Showandhide

Loop

Random

Encode

Encode

Encode

Encode

Info Text
Title: "Heading Text"