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.

API command

Easely gather data from external API's.

Basic Usage (HTML)

data-jkit="[api:value=count;url=http\://domain.com/api.json]"

Advanced Init (JavaScript)

$('#myelement').jKit('api', { 'value': 'count', 'url': 'http\://domain.com/api.json' });

Options

OptionValuesDefaultDescription
format"json"jsonThe API format. Currently only json (jsonp) is supported
valueStringThe value from the returned data to use
urlStringThe API url
intervalInt-1Set this to a positiv integer if you want to read the url more than once (in seconds)
macroMacro nameThis optional macro will be applied to the element after the data is loaded
templateTemplate nameOptional name of an api template

Events

EventDescription
errorTriggered when an error occured
completeTriggered after the API was loaded succesfully

Examples

Social counts:

Load the twitter and facebook count for the url: http://news.ycombinator.com:

  • Twitter count:
  • Facebook shares:
Source:
<ul>
	<li>Twitter count: <span data-jkit="[api:format=json;value=count;url=http\://urls.api.twitter.com/1/urls/count.json?url\=http\://news.ycombinator.com]"></span></li>
	<li>Facebook shares: <span data-jkit="[api:format=json;value=shares;url=http\://graph.facebook.com/http\://news.ycombinator.com]"></span></li>
</ul>

Latest jKit commit:

Load the jKit repo data from Github and display the lastest commit message:

Latest jKit commit:

Source:
<p>
	Latest jKit commit: <span data-jkit="[api:format=json;value=data[0].commit.message;url=https\://api.github.com/repos/FrediBach/jQuery-jKit/commits]"></span></li>
</p>

All the latest jKit commits:

In this example we use a template to display the 10 latest Github commits of jKit:

loading ...
Source:
<!-- defining our api template: -->

<div class="box" rel="jKit[template:action=set;name=commits]" style="display:none">
	<ul>
		<li data-jkit-api-if="data[0]">
			<h4 data-jkit-api="data[0].commit.message"></h4>
			<p>
				<span data-jkit-api="data[0].commit.committer.date"></span>
				 by <span data-jkit-api="data[0].commit.committer.name"></span>
			</p>
		</li>
		<li data-jkit-api-if="data[1]">
			<h4 data-jkit-api="data[1].commit.message"></h4>
			<p>
				<span data-jkit-api="data[1].commit.committer.date"></span>
				 by <span data-jkit-api="data[1].commit.committer.name"></span>
			</p>
		</li>
		<li data-jkit-api-if="data[2]">
			<h4 data-jkit-api="data[2].commit.message"></h4>
			<p>
				<span data-jkit-api="data[2].commit.committer.date"></span>
				 by <span data-jkit-api="data[2].commit.committer.name"></span>
			</p>
		</li>
		
		<!-- ... cutted out more entries for better readability ... -->
		
	</ul>
</div>

<!-- calling the template with the api command: -->

<div data-jkit="[api:format=json;template=commits;url=https\://api.github.com/repos/FrediBach/jQuery-jKit/commits]">loading ...</div>

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 ]