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.

Cycle command

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

Basic Usage (HTML)

data-jkit="[cycle:sequence=odd,even]"

Advanced Init (JavaScript)

$('#myelement').jKit('cycle', { 'sequence': 'odd,even' });

Options

OptionValuesDefaultDescription
what"class", "html", "attr.id" or "css.color"classWhat element property should be cycled?
whereDOM elementliWhich DOM elements should be affected?
scope"all" or "children"childrenAffect only the direct children or all elements?
sequenceComma separated stringsodd,evenThe values that should be repeated.

Events

This command has no events.

Examples

Odd/even rows:

Add "odd" and "even" classes to the immediate children list items:

  • List entry 1
  • List entry 2
  • List entry 3
  • List entry 4
    • Sub entry 1
    • Sub entry 2
    • Sub entry 3
  • List entry 5
Source:
<ul data-jkit="[cycle:what=class;where=li;scope=children;sequence=odd,even]">
	<li>List entry 1</li>
	<li>List entry 2</li>
	<li>List entry 3</li>
	<li>
		List entry 4
		<ul>
			<li>Sub entry 1</li>
			<li>Sub entry 2</li>
			<li>Sub entry 3</li>
		</ul>
	</li>
	<li>List entry 5</li>
</ul>

Odd/even rows #2:

Add "odd" and "even" classes to all list items:

  • List entry 1
  • List entry 2
  • List entry 3
  • List entry 4
    • Sub entry 1
    • Sub entry 2
    • Sub entry 3
  • List entry 5
Source:
<ul data-jkit="[cycle:what=class;where=li;scope=all;sequence=odd,even]">
	<li>List entry 1</li>
	<li>List entry 2</li>
	<li>List entry 3</li>
	<li>
		List entry 4
		<ul>
			<li>Sub entry 1</li>
			<li>Sub entry 2</li>
			<li>Sub entry 3</li>
		</ul>
	</li>
	<li>List entry 5</li>
</ul>

Odd/even rows #3:

Do some direct inline css styling:

  • List entry 1
  • List entry 2
  • List entry 3
  • List entry 4
    • Sub entry 1
    • Sub entry 2
    • Sub entry 3
  • List entry 5
Source:
<ul data-jkit="[cycle:what=css.color;where=li;scope=all;sequence=#000,#f30]">
	<li>List entry 1</li>
	<li>List entry 2</li>
	<li>List entry 3</li>
	<li>
		List entry 4
		<ul>
			<li>Sub entry 1</li>
			<li>Sub entry 2</li>
			<li>Sub entry 3</li>
		</ul>
	</li>
	<li>List entry 5</li>
</ul>

A longer sequence:

Of course you can cycle with more than two options, as many as you want actually:

  • List entry 1
  • List entry 2
  • List entry 3
  • List entry 4
    • Sub entry 1
    • Sub entry 2
    • Sub entry 3
  • List entry 5
Source:
<ul data-jkit="[cycle:what=css.color;where=li;scope=all;sequence=#000,#03f,#f30]">
	<li>List entry 1</li>
	<li>List entry 2</li>
	<li>List entry 3</li>
	<li>
		List entry 4
		<ul>
			<li>Sub entry 1</li>
			<li>Sub entry 2</li>
			<li>Sub entry 3</li>
		</ul>
	</li>
	<li>List entry 5</li>
</ul>

A combination of commands:

You can of course combine it with other commands, for example to create rainbow text:

This is some example text, it will look like a rainbow ... hopefully.
Source:
<div id="rainbow1" style="font-size:20px;font-weight:bold" data-jkit="[split:container=span][cycle:what=css.color;where=span;sequence=#FF0000,#FF7F00,#FFE100,#00FF00,#0000FF,#6600FF,#8B00FF]">This is some example text, it will look like a rainbow ... hopefully.</div>

Empty cycles:

You can just affect every 4th character like this:

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Source:
<div id="ever4" style="font-size:20px;font-weight:bold" data-jkit="[split:container=span][cycle:what=css.color;where=span;sequence=,,,#f30]">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</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 ]