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.

Paginate command

Lets you create paginated content.

Basic Usage (HTML)

data-jkit="[paginate:limit=5;animation=fade]"

Advanced Init (JavaScript)

$('#myelement').jKit('paginate', { 'limit': '5', 'animation': 'fade' });

Options

OptionValuesDefaultDescription
limitInt25The height in Pixels or the number of entries
by"node" or "height"nodeBy what measure to split the content, either the height of the content or the number of entries
containerjQuery SelectorAn optional element with that contains the entries
pos"after" or "before"afterWhere to place the pagination
animation"fade", "slide", "grow" or "none"noneThe type of animation used for the transition
speedInt or "fast", "slow" (Milliseconds)250The duration of the animation in milliseconds, bigger = slower.
easingString ("linear" or easing plugin option)linearThe easing behavior of the animation

Events

EventDescription
showpageTriggered when a new page is being shown
showpageNTriggered when a new page is being shown where N is the page index

Examples

Table example:

Paginate the rows of a table:

Name Location Birthday Category Status Superior Price (CHF)
Mr. Max KellerCH-7278 Davos Monstein1-29-1986freelanceractive#1201.00
Ms. Sophia RothCH-3186 Düdingen2-16-1955freelanceractive#12025.25
Mr. Fredi BaumannCH-6543 Arvigo11-21-1993freelanceractive2.99
Ms. Hannah ZimmermannLI-9493 Mauren6-26-1967freelanceractive#116848.95
Ms. Maja BrunnerD-21207 Seevetal10-22-1934traineeactive#120200.10
Mr. Tom FischerLI-9492 Eschen5-19-1955freelancerinactive#1168-5.05
Mr. Kon FischerLI-9492 Eschen5-19-1955freelancerinactive#1168-5.05
Ms. Alina GerberD-21710 Engelschoff10-15-1981employeeactive#116810
Mr. Tim GerberCH-6543 Arvigo12-8-1943freelanceractive#1204721.45
Mr. Felix MeierLI-9486 Schaanwald8-26-1975guestactive#12012.55
Mr. Fredi MüllerLI-9486 Schaanwald10-24-1953traineeactive#120354.50
Mr. Tim GerberCH-1773 Léchelles12-25-1966freelanceractive42.85
Ms. Lilli MeyerD-21207 Seevetal11-29-1938guestactive87.41
Ms. Emilie FischerD-04299 Leipzig11-7-1942freelanceractive#463354.01
Mr. Fredi GrafCH-6534 S. Vittore12-7-1971employeeactive#12014.12
Ms. Cordelia WeberCH-6543 Arvigo2-23-1967employeeactive#12010.25
Source:
<table width="100%" data-jkit="[paginate:limit=5;container=tbody]">
	<thead>
		<tr>
			<th>Name</th>
			<th>Location</th>
			<th>Birthday</th>
			<th>Category</th>
			<th>Status</th>
			<th>Superior</th>
			<th>Price (CHF)</th>
		</tr>
	</thead>
	<tbody>
		<tr><td>Mr. Max Keller</td><td>CH-7278 Davos Monstein</td><td>1-29-1986</td><td>freelancer</td><td>active</td><td>#120</td><td>1.00</td></tr>
		<tr><td>Ms. Sophia Roth</td><td>CH-3186 D&uuml;dingen</td><td>2-16-1955</td><td>freelancer</td><td>active</td><td>#120</td><td>25.25</td></tr>
		<tr><td>Mr. Fredi Baumann</td><td>CH-6543 Arvigo</td><td>11-21-1993</td><td>freelancer</td><td>active</td><td></td><td>2.99</td></tr>
		<tr><td>Ms. Hannah Zimmermann</td><td>LI-9493 Mauren</td><td>6-26-1967</td><td>freelancer</td><td>active</td><td>#1168</td><td>48.95</td></tr>
		<tr><td>Ms. Maja Brunner</td><td>D-21207 Seevetal</td><td>10-22-1934</td><td>trainee</td><td>active</td><td>#120</td><td>200.10</td></tr>
		<tr><td>Mr. Tom Fischer</td><td>LI-9492 Eschen</td><td>5-19-1955</td><td>freelancer</td><td>inactive</td><td>#1168</td><td>-5.05</td></tr>
		<tr><td>Mr. Kon Fischer</td><td>LI-9492 Eschen</td><td>5-19-1955</td><td>freelancer</td><td>inactive</td><td>#1168</td><td>-5.05</td></tr>
		<tr><td>Ms. Alina Gerber</td><td>D-21710 Engelschoff</td><td>10-15-1981</td><td>employee</td><td>active</td><td>#1168</td><td>10</td></tr>
		<tr><td>Mr. Tim Gerber</td><td>CH-6543 Arvigo</td><td>12-8-1943</td><td>freelancer</td><td>active</td><td>#120</td><td>4721.45</td></tr>
		<tr><td>Mr. Felix Meier</td><td>LI-9486 Schaanwald</td><td>8-26-1975</td><td>guest</td><td>active</td><td>#120</td><td>12.55</td></tr>
		<tr><td>Mr. Fredi M&uuml;ller</td><td>LI-9486 Schaanwald</td><td>10-24-1953</td><td>trainee</td><td>active</td><td>#120</td><td>354.50</td></tr>
		<tr><td>Mr. Tim Gerber</td><td>CH-1773 L&eacute;chelles</td><td>12-25-1966</td><td>freelancer</td><td>active</td><td></td><td>42.85</td></tr>
		<tr><td>Ms. Lilli Meyer</td><td>D-21207 Seevetal</td><td>11-29-1938</td><td>guest</td><td>active</td><td></td><td>87.41</td></tr>
		<tr><td>Ms. Emilie Fischer</td><td>D-04299 Leipzig</td><td>11-7-1942</td><td>freelancer</td><td>active</td><td>#463</td><td>354.01</td></tr>
		<tr><td>Mr. Fredi Graf</td><td>CH-6534 S. Vittore</td><td>12-7-1971</td><td>employee</td><td>active</td><td>#120</td><td>14.12</td></tr>
		<tr><td>Ms. Cordelia Weber</td><td>CH-6543 Arvigo</td><td>2-23-1967</td><td>employee</td><td>active</td><td>#120</td><td>10.25</td></tr>
	</tbody>
</table>

List example:

Paginate the entries of a list by the height of the elments and fade in the new content:

  • jh sdgjkgh fjdhsgdfjkhgfjkdhsg jhjksdgh fjkdhg jkfdshjkg jkfdh sgjkhfdjkshg fjhgjkfhdjsghjksh g
  • hdjh gjkdfhgj khfdjkgha jfhgkj gdsalhd f
  • j dsfjk hdjf gdshafg hdsgfa hjhdfg sdhjgfjh dsfahj ghdfg dsahgfhjsdfgh ab
  • j dhsfkajhdj fghjkdhg ajfhjghd sjhagjjkhgfjdh gjkhdfjkahgj
  • dh safhjkl hgfdjhasjdkghjhdajkhg jdfh gahjkd hsajghj fghadfjk hjgkh jkhg dfa
  • d skhafmh gjhdfjka ghjghjk dashjgjkhf adhfg jdhajk sg
  • d sfhajhdjfhjsda gjh jl
  • d shfjklh djkahfgjk dajksghjkghadsj jkgh jdashjk ghjksadg jgh ljhdjgks ad sjhaflkhf jkadghjh gjklhdgajhkjljksagl asdg
  • d dhjsfga hjgdsagads jdsha hfj hj salhfjd shakhfd jkahsd fjkdsagfjkgfdjhsagl fjhgsda l
  • jj sakdflh jkh djkhfjdsajhf jdsfhgdshfhjdfh jkhdsjd sfagjklg dfsjajdgjkgdsajkl jdas gljkds akl
  • dmh safhgjk dashjf kgjkfgd sajkgfjk sdjhgf lsdagjk gfjkdas gfg asd
  • jgajs fgjk
Source:
<ul style="width:250px" data-jkit="[paginate:by=height;limit=100;animation=fade;pos=before]">
	<li>jh sdgjkgh fjdhsgdfjkhgfjkdhsg jhjksdgh fjkdhg jkfdshjkg jkfdh sgjkhfdjkshg fjhgjkfhdjsghjksh g</li>
	<li>hdjh gjkdfhgj khfdjkgha jfhgkj gdsalhd f </li>
	<li>j dsfjk hdjf gdshafg hdsgfa hjhdfg sdhjgfjh dsfahj ghdfg dsahgfhjsdfgh ab</li>
	<li>j dhsfkajhdj fghjkdhg ajfhjghd sjhagjjkhgfjdh gjkhdfjkahgj</li>
	<li>dh safhjkl hgfdjhasjdkghjhdajkhg jdfh gahjkd hsajghj fghadfjk hjgkh jkhg dfa</li>
	<li>d skhafmh gjhdfjka ghjghjk dashjgjkhf adhfg jdhajk sg</li>
	<li>d sfhajhdjfhjsda gjh jl</li>
	<li>d shfjklh djkahfgjk dajksghjkghadsj jkgh jdashjk ghjksadg jgh ljhdjgks ad sjhaflkhf jkadghjh gjklhdgajhkjljksagl asdg</li>
	<li>d dhjsfga hjgdsagads jdsha hfj hj salhfjd shakhfd jkahsd fjkdsagfjkgfdjhsagl fjhgsda l</li>
	<li>jj sakdflh jkh djkhfjdsajhf jdsfhgdshfhjdfh jkhdsjd sfagjklg dfsjajdgjkgdsajkl jdas gljkds akl</li>
	<li>dmh safhgjk dashjf kgjkfgd sajkgfjk sdjhgf lsdagjk gfjkdas gfg asd</li>
	<li>jgajs fgjk</li>
</ul>

Example CSS

ul.jkit-pagination, ul.jkit-pagination li {
	margin: 0px;
	padding: 0px;
	list-style: none;
}
ul.jkit-pagination {
	margin-top: 10px;
}
ul.jkit-pagination li {
	display: inline;
	background: #333;
	color: #fff;
	padding: 6px;
	padding-top: 3px;
	padding-bottom: 2px;
	cursor: pointer;
	cursor: hand;
	margin-right: 5px;
}
ul.jkit-pagination li.active {
	background: #f30;
}

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 ]