A very easy to use, cross platform jQuery UI library that’s still small in size, has the features you need and doesn’t get in your way.

Tested browsers: Chrome, Firefox, Safari, IE7+, Opera and Safari Mobile

Basics

<script type="text/javascript" src="jquery.jkit.1.0.42.min.js"></script>

Attach it to the whole body or any other element:

<script type="text/javascript">
$(document).ready(function(){
	$('body').jKit();
});
</script>

Apply one of the many commands to some element with the rel attribute:

rel="jKit[command:option=value;anotheroption=anothervalue]"

Or if you don’t want to misuse the rel attribute, do it the HTML5 way:

data-jkit="[command:option=value;anotheroption=anothervalue]"

And of course you can execute a command through JavaScript if needed:

$('#myelement').jKit('scroll', { 'speed': 1000, 'dynamic': 'no' });

Commands

• background
• hide
• remove
• show
• showandhide
• loop
• limit
• scroll
• lightbox
• partially
• random
• slideshow
• gallery
• tabs
• accordion
• carousel
• parallax
• animation
• menu
• tooltip
• form
• validate
• plugin
• lorem
• binding
• macro
• template
• chart
• encode
• split
• live
• key
• ajax
• replace
• cycle
• fontsize
• swap
• ticker
• sort

More to come …

Background

Ideally added right after the body tag, and don’t forget the “width” and “height” attribute:

<img rel="jKit[background:distort=no]" id="bg" src="images/bg5.jpeg" width="2048" height="1536">

Options:

• distort: yes no

Hide

Hide any element easily:

<div class="box" id="mydiv1" rel="jKit[hide:delay=2000;speed=500;animation=fade]">Text ...</div>

Options:

• delay: Int (Milliseconds) 0
• speed: Int or “fast”, “slow” (Milliseconds) 500
• animation: “fade”, “slide” or “none” fade
• easing: Easing plugin options linear

Remove

Or just completelly remove an element from the DOM:

<div class="box" id="mydiv2" rel="jKit[remove:delay=4000]">Text ...</div>

Options:

• delay: Int (Milliseconds) 0

Show

You can of course show an element, as well:

<div class="box" id="mydiv3" style="display:none" rel="jKit[show:delay=6000;speed=1500]">Text ...</div>

Options:

• delay: Int (Milliseconds) 0
• speed: Int or “fast”, “slow” (Milliseconds) 500
• animation: “fade”, “slide” or “none” fade
• easing: Easing plugin options linear

Show and Hide

Or do both things, show and hide, in succession:

<div class="box" id="mydiv4" style="display:none" rel="jKit[showandhide:delay=2000;speed=500;duration=5000]">Text ...</div>

Options:

• delay: Int (Milliseconds) 0
• speed: Int or “fast”, “slow” (Milliseconds) 500
• duration: Int (Milliseconds) 10000
• animation: “fade”, “slide” or “none” fade
• easing: Easing plugin options linear

Loop

Or do the whole loop (duration1 is the hidden phase, duration2 the shown):

<div class="box" id="mydiv4b" style="display:none" rel="jKit[loop:speed1=2000;duration1=250;speed2=250;duration2=2000]">Text ...</div>

Options:

• speed1: Int or “fast”, “slow” (Milliseconds) 500
• speed2: Int or “fast”, “slow” (Milliseconds) 500
• duration1: Int (Milliseconds) 2000
• duration2: Int (Milliseconds) 2000
• easing1: Easing plugin options linear
• easing2: Easing plugin options linear
• animation: “fade”, “slide” or “none” fade

Limit

Remove any childrens inside an element that exceed a limit of 3:

<ul rel="jKit[limit:count=3]">
	<li>Entry 1</li>
	<li>Entry 2</li>
	<li>Entry 3</li>
	<li>Entry 4</li>
</ul>

Options:

• elements: “children” or “chars” children
• count: Int 5
• endstring: String … (used if type = chars)
• speed: Int or “fast”, “slow” (Milliseconds) 250
• animation: “fade”, “slide” or “none” none
• easing: Easing plugin options linear

Limit a string to 25 characters:

<span rel="jKit[limit:elements=chars;count=25]">1234567890123456789012345678901234567890123456789</span>

Scroll

Smoothly scrolls to an anchor or the top on click:

<a href="" rel="jKit[scroll]">To the top!</a>

<a href="#command_random" rel="jKit[scroll:speed=1000;easing=easeOutBounce]">To the top!</a>

Options:

• speed: Int or “fast”, “slow” (Milliseconds) 500
• easing: Easing plugin options linear
• dynamic: “yes” or “no” yes

Lightbox

Simple lightbox functionality for images and iframed urls:

<a href="images/sky.jpg" rel="jKit[lightbox]" title="Paragliders in the sky">Open Image</a>

Options:

• group: String ”
• speed: Int or “fast”, “slow” (Milliseconds) 500
• opacity: Float 0-1 0.7
• clearance: Int (pixels) 200
• closer: HTML x
• next: HTML >
• prev: HTML <
• modal: “yes” or “no” no
• width: CSS width ”
• height: CSS height ”
• titleHeight: Int (pixels) ’20’

Partially

Too much of something? Than only show part of it:

<div class="box" id="mydiv5" style="width:400px;padding:6px;background:#ffd;border:1px #eeb solid" rel="jKit[partially:height=50;speed=500;easing=easeOutBounce]">Text ...</div>

Options:

• height: Int (Pixels) 200
• text: Text or HTML more …
• speed: Int or “fast”, “slow” (Milliseconds) 250
• easing: Easing plugin options linear

Random

Another way to show only part of something is to randomly pick one or more from something:

<div class="box" id="randomly" rel="jKit[random:count=2]">
	<p id="rand1" style="color:#c30">
		Text 1 (red)
	</p>
	<p id="rand2" style="color:#0c3">
		Text 2 (green)
	</p>
	<p id="rand2" style="color:#03c">
		Text 3 (blue)
	</p>
</div>

Slideshow

Create a slideshow the easy way, with many options for different usecases:

<div id="mydiv7" rel="jKit[slideshow:interval=4000;speed=250;animation=fade]">
	<a href="http://fredibach.ch" target="_blank"><img src="slides/p1.jpg"></a>
	<a href="http://fredibach.ch" target="_blank"><img src="slides/p2.jpg"></a>
	<a href="http://fredibach.ch" target="_blank"><img src="slides/p3.jpg"></a>
	<a href="http://fredibach.ch" target="_blank"><img src="slides/p4.jpg"></a>
	<a href="http://fredibach.ch" target="_blank"><img src="slides/p5.jpg"></a>
</div>

Options:

• shuffle: “yes” or “no” no
• interval: Int (Milliseconds) 3000
• speed: Int or “fast”, “slow” (Milliseconds) 500
• animation: “fade”, “slide” or “none” fade
• easing: Easing plugin options linear

You can create a slideshow with almost anything, for example with headings:

<div id="mydiv8" style="text-align:center;font-size:2em" rel="jKit[slideshow:interval=2000;speed=500;animation=fade]">
	<h3>First Headline</h3>
	<h3>Another Headline</h3>
	<h3>Even More of a Headline</h3>
	<h3>Still not the last headline</h3>
	<h3>The last headline</h3>
</div>

Gallery

Another thing you can create with images is a gallery:

<div id="mydiv9" rel="jKit[gallery:event=click;active=4]">
	<img src="slides/p1.jpg" title="Image caption one">
	<img src="slides/p2.jpg" title="Image caption two">
	<img src="slides/p3.jpg" title="Image caption three">
	<img src="slides/p4.jpg" title="Image caption four">
	<img src="slides/p5.jpg" title="Image caption five">
</div>

Options:

• active: Int 1
• event: “mouseover” or “click” click
• showcaptions: “yes” or “no” yes

Tabs

A good way to work with a lot of content that can be easily separated:

<div id="mytabs" style="height:300px;width:420px;" rel="jKit[tabs:animation=none]">
	<div>
		<h3>Title 1</h3>
		<div>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.</div>
	</div>
	<div>
		<h3>Title 2</h3>
		<div><a href="http://fredibach.ch" target="_blank"><img src="images400x250/paragliding1.jpeg"></a></div>
	</div>
	<div>
		<h3>Title 3>/h3<
		<div><ul><li>List Item 1</li><li>List Item 2</li><li>List Item 3</li></ul></div>
	</div>
</div>

Options:

• active: Int 1
• speed: Int or “fast”, “slow” (Milliseconds) 250
• animation: “fade”, “slide” or “none” none
• easing: Easing plugin options linear

Accordion

Similar like tabs, but with a different concept:

<div id="myaccordion" style="width:420px;" rel="jKit[accordion]">
	<div>
		<h3>Title 1</h3>
		<div>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.</div>
	</div>
	<div>
		<h3>Title 2</h3>
		<div><a href="http://fredibach.ch" target="_blank"><img src="images400x250/paragliding1.jpeg"></a></div>
	</div>
	<div>
		<h3>Title 3</h3>
		<div><ul><li>List Item 1</li><li>List Item 2</li><li>List Item 3</li></ul></div>
	</div>
</div>

Options:

• active: Int 1
• speed: Int or “fast”, “slow” (Milliseconds) 250
• animation: “slide” or “none” slide
• easing: Easing plugin options linear

Carousel

Let different content go around and around … and around:

<div class="carousel" rel="jKit[carousel]">
	<div class="carousel-item">
		DIV 1 ...
	</div>
	<div class="carousel-item">
		DIV 2 ...
	</div>
	<div class="carousel-item">
		DIV 3 ...
	</div>
	<div class="carousel-item">
		DIV 4 ...
	</div>
	<div class="carousel-item">
		DIV 5 ...
	</div>
	<div class="carousel-item">
		DIV 6 ...
	</div>
	<div class="carousel-item">
		DIV 7 ...
	</div>
</div>

Options:

• autoplay: “yes” or “no” “yes”
• limit: Int 5
• speed: Int or “fast”, “slow” (Milliseconds) 250
• animation: “slide” or “none” grow
• easing: Easing plugin options linear
• interval: Int (Milliseconds) 5000
• prevhtml: HTML <
• nexthtml: HTML >

Parallax

Create a parallax scrolling effect with multiple elements of different content:

<div class="parallax-container" rel="jKit[parallax:strength=3]">
	<div class="parallax parallax1">Background Layer</div>
	<div class="parallax parallax2">Middle Layer</div>
	<div class="parallax parallax3">Foreground Layer</div>
</div>

• strength: Int (1-10) 5
• axis: “x”, “y” or “both” x
• scope: “local” or “global” global

Animation

Create an animation with frames of different content:

<div class="animation-container" rel="jKit[animation:fps=30;loop=yes]">
	<div class="animation" rel="jKit[frame:steps=100;action=fadeout]" style="font-size:90px;background:#000"><img src="images/jkit_logo.png" alt="jKit" title="jKit" style="margin-top:110px"></div>
	<div class="animation" rel="jKit[frame:steps=7]" style="font-size:90px;line-height:260%">animation</div>
	<div class="animation" rel="jKit[frame:steps=10]" style="font-size:90px;line-height:260%">made</div>
	<div class="animation" rel="jKit[frame:steps=50;action=tween;easing=easeOutBounce]" style="font-size:200px;padding-top:110px">easy</div>
	<div class="animation" rel="jKit[frame:steps=1]" style="font-size:20px;opacity:0;padding-top:110px">easy</div>
	<div class="animation" rel="jKit[frame:steps=25]"></div>
	<div class="animation" rel="jKit[frame:steps=75;action=fadeinout]" style="font-size:50px;line-height:500%;color:#E01B49;background:#fff">really easy!</div>
	<div class="animation" rel="jKit[frame:steps=50]"></div>
	<div class="animation" rel="jKit[frame:steps=50;action=fadein]" style="background:#000"></div>
</div>

Animation options:

• fps: Int (1-10) 25
• loop: “yes” or “no” no

Frame options:

• steps: Int 1
• action: “show”, “fadeout”, “fadein”, “fadeinout” or “tween” show
• easing: Easing plugin options linear

Menu

Create a dropdown menu from a multi-level unordered list:

<ul class="dropdown" rel="jKit[menu]">
	<li><a href="#">Main 1</a>
      		<ul class="sub_menu">
      			 <li><a href="#">Sub 1A</a></li>
      			 <li><a href="#">Sub 1B</a></li>
      			 <li><a href="#">Sub 1C</a></li>
      			 <li><a href="#">Sub 1D</a></li>
      		</ul>
      	</li>
	<li><a href="#">Main 2</a>
      		<ul class="sub_menu">
      			 <li><a href="#">Sub 2A</a></li>
      			 <li><a href="#">Sub 2B</a></li>
      		</ul>
      	</li>
	<li><a href="#">Main 3</a>
      		<ul class="sub_menu">
      			 <li><a href="#">Sub 3A</a></li>
      			 <li><a href="#">Sub 3B</a></li>
      			 <li>
				<a href="#">Sub 3C</a>
				<ul>
      					<li><a href="#">Sub 3C1</a></li>
      					<li><a href="#">Sub 3C2</a></li>
      				</ul>
			</li>
      		</ul>
      	</li>
</ul>

• Main 1
  • Sub 1A
  • Sub 1B
  • Sub 1C
  • Sub 1D
• Main 2
  • Sub 2A
  • Sub 2B
• Main 3
  • Sub 3A
  • Sub 3B
  • Sub 3C
    • Sub 3C1
    • Sub 3C2

Tooltip

Show additional info with a tooltip:

<a href="#" rel="jKit[tooltip:color=#fff;background=#999;text=Test Tooltip Text]">Test Link</a>     
<a href="#" rel="jKit[tooltip:color=#333;background=#E01B49;text=Test Tooltip Text 2]">Test Link 2</a>
<a href="#" rel="jKit[tooltip:classname=mytooltip;text=Test Tooltip Text 3]">Test Link with a class for styling</a>

Options:

• text: String “”
• color: CSS color #fff
• background: CSS color #000

Plugin

Register some plugins (plugins with single and multiple options are possible):

$('body').jKit({ 
	'plugins': {
		date: { 'path': "plugins/datepicker/js/datepicker.js", 'fn': 'DatePicker' },
		hint: { 'path': "plugins/jquery.ztinputhint-1.2.js", 'fn': 'ztInputHint' },
		maxlength: { 'path': "plugins/maxlength/jquery.maxlength-min.js", 'fn': 'maxlength' },
		grow: { 'path': "plugins/jquery.jgrow-0.4.js", 'fn': 'jGrow' },
		confirm: { 'path': "plugins/jquery.confirm-1.3.js", 'fn': 'confirm' },
		time: { 'path': "plugins/timePicker/jquery.timePicker.min.js", 'fn': 'timePicker' },
		mask: { 'path': "plugins/jquery.maskedinput-1.2.2.min.js", 'fn': 'mask', 'option': 'mask' }
	}
});

And than apply the plugin to an element in a similar way as with native jKit commands:

<input name="hint" id="hint" title="My Hint Text" rel="jKit[plugin:script=hint;hintClass=hint]">

Options:

• script: registered key or script path
• + plugin specific options …

A few more examples, here’s a growing textfield:

<textarea name="comment" id="comment" rel="jKit[plugin:script=grow]"></textarea>

A maximun number of characters:

><input name="tweet" id="tweet" rel="jKit[plugin:script=maxlength;maxCharacters=140]">>

Form

An example with the Ajax Mailer that is bundled with the script:

<form class="box" method="post" action="https://jquery-jkit.com/ajaxmailer.php.js" rel="jKit[form:success=Thank you;error=Please check all fields]">
...
</form>

Or just validate:

<form class="box" method="post" action="https://jquery-jkit.com/?" rel="jKit[form:validateonly=true]">
...
</form>

Options:

• success: Text or element ID
• error: Text
• validateonly: “yes” or “no” no

Validate

Validation without a type, just min. and max. length and the field is required:

<input name="username" id="username" rel="jKit[validate:required=true;min=3;max=10;error=Bitte gib deinen Benutzernamen ein (3-10 Zeichen)]">

Validation with type “custom” that takes a custom function to validate:

<input name="custom" id="custom" title="127-785-145" rel="jKit[validate:type=custom;checkfunction=checkCustom;error=Bitte gib deinen Custom Code ein][plugin:script=hint;hintClass=hint]">

Options:

• type: “email”, “url”, “date”, “time”, “phone”, “float”, “int”, “group”, “extension” or “custom”
• required: Bool false
• error: String
• min: Int, Float or String
• max: Int, Float or String
• length: String length
• bigger: DOM Element
• smaller: DOM Element
• older: DOM Element
• younger: DOM Element
• longer: DOM Element
• shorter: DOM Element
• strength: Int 1-100
• same: DOM Element
• different: DOM Element
• options: Strings (comma separated)
• checkfunction: Function name
• name: Group name

<input name="password" id="password" type="password" rel="jKit[validate:required=true;strength=50;error=Please enter a secure password]">

<input name="passwordtest" id="passwordtest" type="password" rel="jKit[validate:required=true;same=#password;error=The two passwords don't match, please try again]">

<input name="phone" id="phone" title="+41 78 450 45 21" rel="jKit[validate:type=phone;required=true;error=Please enter a valid phone number]">

<input name="email" id="email" title="[email protected]" rel="jKit[validate:type=email;required=true;error=Please enter a valid email address]">

<input name="homepage" id="homepage" title="http://www.abc.ch" rel="jKit[validate:type=url;error=This isn't a valid URL]">

<input name="avatar" type="file" id="avatar" rel="jKit[validate:type=extension;options=jpg,jpeg,gif;error=Please choose a valid image format]">

<div id="radiogroup" rel="jKit[validate:type=group;name=group1;error=Please choose one option]">
	<input type="radio" id="group1_milk" name="group1" value="Milk"> Milk<br>
	<input type="radio" id="group1_butter" name="group1" value="Butter"> Butter<br>
	<input type="radio" id="group1_cheese" name="group1" value="Cheese"> Cheese
</div>

<div id="checkgroup" rel="jKit[validate:type=group;min=1;max=2;error=Please choose at least one option, but not more than two]">
	<input type="checkbox" id="group2_milk" name="group2_milk" value="Milk"> Milk<br>
	<input type="checkbox" id="group2_butter" name="group2_butter" value="Butter"> Butter<br>
	<input type="checkbox" id="group2_salt" name="group2_salt" value="Salt"> Salt<br>
	<input type="checkbox" id="group2_cheese" name="group2_cheese" value="Cheese"> Cheese
</div>

<input name="mydate" id="mydate" title="Example: 21.04.12" rel="jKit[validate:type=date;required=true;error=Please add a valid date]">

<input name="mytime" id="mytime" title="Example: 12:05" rel="jKit[validate:type=time;required=true;error=Please add a time][plugin:script=time]">

<input name="myint" id="myint" rel="jKit[validate:type=int;min=1;required=true;error=Please add a valid positiv Integer above zero]">

<input name="myfloat" id="myfloat" title="1.72" rel="jKit[validate:type=float;min=1;max=2.5;required=true;error=Please enter a float between 1 and 2.5]">

<input name="length" id="length" rel="jKit[validate:length=6;error=Please enter exactly six characters]">

<input name="send" type="submit" value="Senden" rel="jKit[plugin:script=confirm;msg=Everything filled out correctly?]">

Lorem

<div class="box" id="loremdiv" rel="jKit[lorem:paragraphs=2]"></div>

Options:

• paragraphs: Int 0
• length: Int 100
• random: “yes” or “no” no

Binding

<input type="text" id="bindingsource" value="test">
<p style="font-size:32px" rel="jKit[binding:selector=#bindingsource;mode=bindingFilter]"></p>

The custom function used:

var bindingFilter = function(value,el){
	el.text(value.length+' chars entered');
}

Options:

• selector: String: ‘#mydiv’ or ‘#mydiv1|#mydiv2|#mydiv3’ or “this” ”
• source: “text”, “html”, “val”, “attr.id”, “css.height”, “css.height.max” val
• variable: String ”
• mode: “text”, “html”, “val”, “attr.id”, “css.height”, or some custom function text
• interval: Int (-1 = no interval) 100

Binding the width of the background image (try resizing the browser window):

<h3 style="margin:12px;font-size:32px;text-align:center" rel="jKit[binding:selector=#jkit-background;source=css.width;mode=text]"></h3>

Making three divs the same height:

On every div: rel="jKit[binding:selector=#d1|#d2|#d3;source=css.height.max;mode=css.height]

Hiding empty div:

rel="jKit[binding:selector=this;source=text;mode=css.display]

Macro

Not really a command, but a way to create your own custom commands or as we named them, macros. You can create macros for stuff you’re often using, let’s say you want to have easier access to the above code for hiding an empty div, than just add it as a macro on init like this:

<script type="text/javascript">
$(document).ready(function(){
	$('body').jKit({ macros: { 'hide-if-empty': 'binding:selector=this;source=text;mode=css.display' } });
});
</script>

Now you can use it in a way that’s much easier to remember:

rel="jKit[hide-if-empty]"

Template

Define a template like this:

rel="jKit[template:action=set;name=mylist;vars=heading,text,info]"

And than apply the template like this:

rel="jKit[template:action=apply;children=li;name=mylist]"

Options:

• action: String: ‘set’ or ‘apply’ set
• name: String template
• vars: Comma separated class names of content elements
• children: String (optional)

Have a look at the source of this example to get a better idea:

Chart

Create a table with your data like this:

	

		

			
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

		
	

Options:

• max: Int 0
• delaysteps: Int 100
• speed: Int or “fast”, “slow” (Milliseconds) 500
• easing: Easing plugin options linear

Encode

rel="jKit[encode:format=text]

• format: String “code”, “text”, “esc” or “url” “code”

Demos of the four decoding types, “code”, “text”, “esc” and “url”:

Encode

Here’s an example where we first use the text format and than we’re using an uppercase format that we added through jKits replacements feature (check the head source):

Split

rel="jKit[split]"

Options:

• separator: String “”
• container: String (DOM element type) “span”
• before: String “”
• after: String “”

Splitting a comma separated string into a “ul > li” list:

	Sun, Stars, Moon, Asteroid

Live

rel="jKit[live]"

Options:

• interval: Int (seconds) 60

Reload a (webcam) image every 10 seconds:

Key

rel="jKit[key:code=ctrl+shift+g]"

Options:

• code: String (keycode combination, for example: “ctrl+shift+g”)

Control links with your keyboard by adding keyboard shortcuts to them:

• Move to the split command with key combo “shift+up”
• Open a website in a blank window with “alt+shift+o”
• Open an onclick alert with “ctrl+shift+a”
• Open an onclick alert with “f3”

Ajax

rel="jKit[ajax:element=#ajaxdiv]"

Options:

• href: String (url) element href attribute
• element: String (dom element) “”
• speed: Int or “fast”, “slow” (Milliseconds) 250
• animation: “fade”, “slide” or “none” slide
• easing: Easing plugin options linear

Easely convert normal href links into ajax links:

Link 1, Link 2

Initial text …

Replace

Options:

• modifier: String “g”
• search: String “”
• replacement: String “”

Replace the name “Fredi” with “Fredi Bach” in bold:

rel="jKit[replace:search=Fredi;replacement=<strong>Fredi Bach</strong>]"

Replace all numbers with XXX:

rel="jKit[replace:search=[0-9]+;replacement=XXX]"

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

Cycle

Options:

• what: String, examples: “class”, “html”, “attr.attributename”, “css.cssoption” “class”
• where: String “li”
• scope: String “children”, “all” “children”
• sequence: String (comma separated) “odd,even”

Add “odd” and “even” classes to the immediate children lis:

rel="jKit[cycle:what=class;where=li;scope=children;sequence=odd,even]"

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

Add “odd” and “even” classes to all lis:

rel="jKit[cycle:what=class;where=li;scope=all;sequence=odd,even]"

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

Or do some direct inline css styling:

rel="jKit[cycle:what=css.color;where=li;scope=all;sequence=#000,#666]"

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

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

rel="jKit[cycle:what=css.color;where=li;scope=all;sequence=#000,#03f,#f30]"

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

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

rel="jKit[split:container=span][cycle:what=css.color;where=span;sequence=#FF0000,#FF7F00,#FFFF00,#00FF00,#0000FF,#6600FF,#8B00FF]"

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

Or just affect every 4th character:

rel="jKit[split:container=span][cycle:what=css.color;where=span;sequence=,,,#f30]"

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Fontsize

Options:

• steps: Int 2
• min: Int 6
• max: Int 72
• affected: String (jQuery selector) “p”

Some heading

Some text …

Some more text …

Swap

Options:

• versions: String (comma separated) “_off,_on”

Very easely swap images with preloaded image replacements:

Ticker

Options:

• delay: Int (Milliseconds) 2000
• speed: Int or “fast”, “slow” (Milliseconds) 100

		

			
Ticker Text 1
			
Another one
			
The third ticker text
			
Even more text for the ticker
		

• Ticker Text 1
• Another one
• The third ticker text
• Even more text for the ticker

Sort

Options:

• what: “text”, “html” or “class” “text”
• by: “alphabetic” or “date” “alphabetic”
• start: Int 0
• end: Int 0

Sort table rows on click (up an d down):

		

			

				

					
Name
					
Location
					
Birthday
					
Category
					
Status
					
Superior
				
			
			

				
Mr. Max Keller
CH-7278 Davos Monstein
1-29-1986
freelancer
active
#120
				
Ms. Sophia Roth
CH-3186 Düdingen
2-16-1955
freelancer
active
#120
				
Mr. Fredi Baumann
CH-6543 Arvigo
11-21-1993
freelancer
active

				
Ms. Hannah Zimmermann
LI-9493 Mauren
6-26-1967
freelancer
active
#1168
				
Ms. Maja Brunner
D-21207 Seevetal
10-22-1934
trainee
active
#120
				
Mr. Tom Fischer
LI-9492 Eschen
5-19-1955
freelancer
inactive
#1168
				
Ms. Alina Gerber
D-21710 Engelschoff
10-15-1981
employee
active
#1168
				
Mr. Tim Gerber
CH-6543 Arvigo
12-8-2022
freelancer
active
#120
				
Mr. Felix Meier
LI-9486 Schaanwald
8-26-1975
guest
active
#120
				
Mr. Fredi Müller
LI-9486 Schaanwald
10-24-1953
trainee
active
#120
				
Mr. Tim Gerber
CH-1773 Léchelles
12-25-1966
freelancer
active

				
Ms. Lilli Meyer
D-21207 Seevetal
11-29-1938
guest
active

				
Ms. Emilie Fischer
D-04299 Leipzig
11-7-2022
freelancer
active
#463
				
Mr. Fredi Graf
CH-6534 S. Vittore
12-7-2022
employee
active
#120
				
Ms. Cordelia Weber
CH-6543 Arvigo
2-23-1967
employee
active
#120
			
		
		

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

jKit Facebook Page: www.facebook.com/jquery.jkit

jKit Google+ Page: plus.google.com/108788332827966881496

My Facebook Profile: www.facebook.com/fredi.bach.ch

My Google+ Profile: www.fredibach.ch/+

My personal Homepage: www.fredibach.ch

My Other Plugins: www.fredibach.ch/jquery-plugins

My Next Big Adventure: www.kiliadventure.ch

©2012 Fredi Bach