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.

Binding command

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

Basic Usage (HTML)

data-jkit="[binding:selector=#bindingsource;source=html;mode=html]"

Advanced Init (JavaScript)

$('#myelement').jKit('binding', { 'selector': '#bindingsource', 'source': 'html', 'mode': 'html' });

Options

OptionValuesDefaultDescription
selectorString: “#mydiv” or “#mydiv1|#mydiv2|#mydiv3” or “this”DOM element to bind to
source“text”, “html”, “val”, “attr.id”, “css.height”, “css.height.max”, “event.click”, “scroll.top”, “cleareance.bottom”, “has.text”valThe binding values source
searchStringUse this in combination with the has.something source option
variableStringUse this option if you want to bind to a JavaScript variable
mode“text”, “html”, “val”, “attr.id”, “css.height”, or some custom functiontextWhere to put the data we are bound to
intervalInt (-1 = no interval)100The update interval
mathStringMathematical equation, for example: value*100 (value is always the binding value)
conditionStringFor example: value>100 (value is always the binding value)
ifStringSet the output to this if the condition is met
elseStringSet the output to this if the condition is not met
speedInt or “fast”, “slow” (Milliseconds)0Animate the changed CSS if speed is > 0 (only applicable if mode is css.x)
easingEasing plugin optionlinearEasing used in case of a CSS animation
trigger“yes” or “no”noTrigger an event with “valueX” and “notvalueX”, where X is the value, whenever the value changes
accuracyInt, float or emptyLimit the accuracy of numeric values to size of this option
minInt, float or emptyLimit anumeric value to this minimum
maxInt, float or emptyLimit a numeric value to this maximum
applytoDOM nodes(s)Where to apply the value, for example “each.div” or “children.p” or “#myelement”
delayInt (Microseconds)0Delay before the comamnd is executed

Events

EventDescription
trueTriggered when a condition is met
falseTriggered when a condition is not met (only condition changes are triggered!)

Examples

Binding a custom function:

In this first example, we’re binding a custom function that counts the characters entered in a textfield:

 
Source:
<input type="text" id="bindingsource" value="test">
<span data-jkit="[binding:selector=#bindingsource;mode=bindingFilter]"></span>
<script>
	var bindingFilter = function(value, el){
		el.text(value.length+' chars entered');
	}
</script>

CSS binding:

In our next example, we are going to bind the width of the body (try resizing the browser window):

Body css.width:  
Source:
Body css.width: <span data-jkit="[binding:selector=body;source=css.width;mode=text]"></span>

Multiple selectors:

How-to make three divs the same height:

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

Source:
<style>.mydivs{ float:left; margin-right: 10px; width: 28%; padding: 10px; background: #fff; }</style>
<div id="d1" class="mydivs" data-jkit="[binding:selector=#d1|#d2|#d3;source=css.height.max;mode=css.height]">
	<p>
		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 
	</p>
</div>
<div id="d2" class="mydivs" data-jkit="[binding:selector=#d1|#d2|#d3;source=css.height.max;mode=css.height]">
	<p>
		dhf kljdhgsjklfhglkfd shg ksl
	</p>
</div>
<div id="d3" class="mydivs" data-jkit="[binding:selector=#d1|#d2|#d3;source=css.height.max;mode=css.height]">
	<p>
		 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
	</p>
</div>

Multiple selectors 2:

Here’s the same example, but with only one command (possible since v1.2.4):

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

Source:
<style>.mydivs{ float:left; margin-right: 10px; width: 28%; padding: 10px; background: #fff; }</style>
<div data-jkit="[binding:selector=children.div;source=css.height.max;mode=css.height;applyto=children.div;interval=-1]">
	<div class="mydivs">
		<p>
			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 
		</p>
	</div>
	<div class="mydivs">
		<p>
			dhf kljdhgsjklfhglkfd shg ksl
		</p>
	</div>
	<div class="mydivs">
		<p>
			 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
		</p>
	</div>
</div>

Hiding an empty div:

Here we’re going to hide an empty div with css.display:

Paragraph with content:

dfsadf dsf sdf dsf dsafsdf sdaf dsf dsafsda

Paragraph without content:

Source:
<strong>Paragraph with content:</strong><br />
<p class="demo" data-jkit="[binding:selector=this;source=text;mode=css.display]">
	dfsadf dsf sdf dsf dsafsdf sdaf dsf dsafsda
</p>
<strong>Paragraph without content:</strong><br />
<p class="demo" data-jkit="[binding:selector=this;source=text;mode=css.display]"></p>

Hide after click:

Here’s an example where we animate the CSS opacity on click:

Click me!

Source:
<p class="demobox" data-jkit="[binding:selector=this;source=event.click;mode=css.opacity;condition=value=1;if=0;speed=1000;interval=-1]">
	Click me!
</p>

Show only when completely inside the viewport:

This one uses clearence as its source:

<p class="demobox" data-jkit="[binding:selector=this;source=clearance;mode=css.opacity;condition=value>0;if=1;else=0.2]"></p>

Text search:

Searching for the string test and apply the number times 100 to the width:

Test the test test

Two testtest

Only one test

Source:
<div data-jkit="[binding:target=children;selector=this;source=has.text;search=test;mode=css.width;math=value*100]" class="test">
	<p style="background:#65BAE2">Test the test test</p>
	<p style="background:#C8295B">Two testtest</p>
	<p style="background:#BBD17C">Only one test</p>
</div>

Condition event:

Show some additional content when a specific element enters the viewport and hide it after it got out of the viewport:

<p class="demobox" style="display:none" data-jkit="[show:onevent=viewport.true][hide:onevent=viewport.false]"> reacting on viewport binding events </p> <p class="demobox" rel="jKit[binding.viewport:selector=this;source=clearance;mode=css.opacity;condition=value>0;if=1;else=0.2]"> viewport detecting box </p>

Has hash:

You can use the has.hash source option to display different content based on the current url hash:

Testlinks: test, example, whatever

#test

#example

Source:
Testlinks: <a href="#test">test</a>, <a href="#example">example</a>, <a href="#whatever">whatever</a>
<p class="demobox" data-jkit="[binding:selector=this;source=has.hash;mode=css.display.block;search=#test]">
	#test
</p>
<p class="demobox" data-jkit="[binding:selector=this;source=has.hash;mode=css.display.block;search=#example]">
	#example
</p>

Has hash events:

You can fire events with the has.* source feature, so yôu can combine the hash detection with the animation commands like this:

Testlinks: test, example, whatever

#test2

#example2

Source:
Testlinks: <a href="#test2">test</a>, <a href="#example2">example</a>, <a href="#whatever2">whatever</a>
<p class="demobox" data-jkit="[binding.test:selector=this;source=has.hash;mode=attr.jkit-hash;search=#test2][show:onevent=test.true][hide:onevent=test.false]">
	#test2
</p>
<p class="demobox" data-jkit="[binding.example:selector=this;source=has.hash;mode=attr.jkit-hash;search=#example2][show:onevent=example.true][hide:onevent=example.false]">
	#example2
</p>

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 ]