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.

Template command

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

Basic Usage (HTML)

data-jkit="[template:action=set;name=mytemplatename]"

Advanced Init (JavaScript)

$('#myelement').jKit('template', { 'action': 'set', 'name': 'mytemplatename' });

Options

OptionValuesDefaultDescription
action"set" or "apply"setDo you want to set (define) a new or apply an old template?
nameStringtemplateThe name of the template
dynamic"yes" or "no"noIs the template dynamic or static?
addhtmlHTML+The HTML for the add button in case the template is dynamic

Events

EventDescription
addedTriggered when a tab new entry is added on a dynamic template

Examples

Static template:

A normal static template (view the source comments to get an idea how templates work):

First entry: ... 3rd entry ... ... last entry.

Info Text
Title: "Heading Text"

Description: Text ...

 
  • 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) ...

Source:
<!-- this whole div is our template -->
<div data-jkit="[template:action=set;name=mylist;vars=heading,text,info]" style="display:none">
	<div class="mylist">
	
		<!-- only show if first entry (class: if-entry-first) -->
		<span class="if-entry-first entrynumber">First entry:</span>
		
		<!-- only show if 3rd entry (class: if-entry-3) -->
		<span class="if-entry-3 entrynumber"> ... 3rd entry ...</span>
		
		<!-- only show if last entry (class: if-entry-last) -->
		<span class="if-entry-last entrynumber"> ... last entry.</span>
		
		<h3>
			<!-- "info" is in the option vars, content will be replaced -->
			<div><span class="info">Info Text</span></div>
			
			<!-- "heading" is in the option vars, content will be replaced -->
			Title: "<span class="heading">Heading Text</span>"
		</h3>
		
		<!-- only show this block if text var isn't empty (class: if-text) -->
		<p class="if-text">
			<strong>Description:</strong> 
			
			<!-- "text" is in the option vars, content will be replaced -->
			<span class="text">Text ...</span>
		</p>
		
		<!-- only show this block if text var isn't empty (class: if-text) -->
		<div class="if-text">&nbsp;</div>
	</div>
</div>

<!-- every li content will be replaced with the template -->
<!-- the template vars heading, info and text are defined by the classes with the same name -->
<ul class="myul" data-jkit="[template:action=apply;children=li;name=mylist]">
	<li>
		<h3 class="heading">List Entry 1</h3>
		<p class="info">250 character jKit lorem</p>
		<p class="text"><span data-jkit="[lorem:length=250]"></span></p>
	</li>
	<li>
		<h3 class="heading">List Entry 2</h3>
		<p class="info">350 character jKit lorem</p>
		<p class="text"><span data-jkit="[lorem:length=350]"></span></p>
	</li>
	<li>
		<h3 class="heading">List Entry 3</h3>
		<p class="info">150 character jKit lorem</p>
		<p class="text"><span data-jkit="[lorem:length=150]"></span></p>
	</li>
	<li>
		<h3 class="heading">List Entry 4</h3>
		<p class="info">2 paragraph jKit lorem</p>
		<p class="text"><span data-jkit="[lorem:paragraphs=2]"></span></p>
	</li>
	<li>
		<h3 class="heading">List Entry 5</h3>
		<p class="info">Without text (removed paragraph) ...</p>
	</li>
</ul>

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 ]