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.

Filter command

Dynamically filter your content and only show what’s currently needed

Basic Usage (HTML)

data-jkit="[filter:by=text;affected=ul > li]"

Advanced Init (JavaScript)

$('#myelement').jKit('filter', { 'by': 'text', 'affected': 'ul > li' });

Options

OptionValuesDefaultDescription
by“class” or “text”classBy what type to filter your content
affectedjQuery selectorWhich DOM elements are affected?
logic“and” or “or”andDo all have to match (and) or at least one (or)
speedInt or “fast”, “slow” (Milliseconds)250The duration of the animation in milliseconds, bigger = slower.
animation“fade”, “slide” or “none”fadeThe type of animation used for the transition
easingString (“linear” or easing plugin option)linearThe easing behavior of the animation
global“yes” or “no”noSearch the affected elements inside the current DOM node or inside the whole document?
loaderDOM elementThe applied element is being shown while the filter is searching

Events

EventDescription
clickedTriggered on change and on click of one of the “jkit-filter” elements
completeTriggered after the filtering is finished

Examples

Basic example:

In this example we have three inputs that define, based on an elements class, what to filter:

  • Entry 1 … (test1)
  • Entry 2 … (test2)
  • Entry 3 … (test3)
  • Entry 4 … (test2 long)
  • Entry 5 … (test1 long)
  • Entry 6 … (test3)
  • Entry 7 … (test2)
  • Entry 8 … (test1 test3)
  • Entry 9 … (test1 test2)
  • Entry 10 … (test99)
Source:
<div class="box" data-jkit="[filter:by=text;affected=ul > li]">
	<select class="jkit-filter">
		<option value="">All</option>
		<option value="test1">test1</option>
		<option value="test2" selected>test2</option>
		<option value="test3">test3</option>
		<option value="test1 test2">test1 & test2</option>
	</select>
	<select class="jkit-filter">
		<option value="" selected>All</option>
		<option value="long">long</option>
	</select>
	<input type="text" class="jkit-filter" value="">
	<ul>
		<li class="test1">Entry 1 ... (test1)</li>
		<li class="test2">Entry 2 ... (test2)</li>
		<li class="test3">Entry 3 ... (test3)</li>
		<li class="test2 long">Entry 4 ... (test2 long)</li>
		<li class="test1 long">Entry 5 ... (test1 long)</li>
		<li class="test3">Entry 6 ... (test3)</li>
		<li class="test2">Entry 7 ... (test2)</li>
		<li class="test1 test3">Entry 8 ... (test1 test3)</li>
		<li class="test1 test2">Entry 9 ... (test1 test2)</li>
		<li class="test99">Entry 10 ... (test99)</li>
	</ul>
</div>

Table search:

You can use the filter command to search through the data inside a table:

(try searching for “Gerber”)
Name Location Birthday
Mr. Max KellerCH-7278 Davos Monstein1-29-1986
Ms. Sophia RothCH-3186 Düdingen2-16-1955
Mr. Fredi BaumannCH-6543 Arvigo11-21-1993
Ms. Hannah ZimmermannLI-9493 Mauren6-26-1967
Ms. Maja BrunnerD-21207 Seevetal10-22-1934
Mr. Tom FischerLI-9492 Eschen5-19-1955
Ms. Alina GerberD-21710 Engelschoff10-15-1981
Mr. Tim GerberCH-6543 Arvigo12-8-2022
Mr. Felix MeierLI-9486 Schaanwald8-26-1975
Mr. Fredi MüllerLI-9486 Schaanwald10-24-1953
Mr. Tim GerberCH-1773 Léchelles12-25-1966
Ms. Lilli MeyerD-21207 Seevetal11-29-1938
Ms. Emilie FischerD-04299 Leipzig11-7-2022
Mr. Fredi GrafCH-6534 S. Vittore12-7-2022
Ms. Cordelia WeberCH-6543 Arvigo2-23-1967
Source:
<div data-jkit="[filter:by=text;affected=table > tbody > tr]">
	Search: <input type="text" class="jkit-filter" value=""> (try searching for "Gerber")
	<table width="100%">
		<thead>
			<tr>
				<th>Name</th>
				<th>Location</th>
				<th>Birthday</th>
			</tr>
		</thead>
		<tbody>
			<tr><td>Mr. Max Keller</td><td>CH-7278 Davos Monstein</td><td>1-29-1986</td></tr>
			<tr><td>Ms. Sophia Roth</td><td>CH-3186 Düdingen</td><td>2-16-1955</td></tr>
			<tr><td>Mr. Fredi Baumann</td><td>CH-6543 Arvigo</td><td>11-21-1993</td></tr>
			<tr><td>Ms. Hannah Zimmermann</td><td>LI-9493 Mauren</td><td>6-26-1967</td></tr>
			<tr><td>Ms. Maja Brunner</td><td>D-21207 Seevetal</td><td>10-22-1934</td></tr>
			<tr><td>Mr. Tom Fischer</td><td>LI-9492 Eschen</td><td>5-19-1955</td></tr>
			<tr><td>Ms. Alina Gerber</td><td>D-21710 Engelschoff</td><td>10-15-1981</td></tr>
			<tr><td>Mr. Tim Gerber</td><td>CH-6543 Arvigo</td><td>12-8-1943</td></tr>
			<tr><td>Mr. Felix Meier</td><td>LI-9486 Schaanwald</td><td>8-26-1975</td></tr>
			<tr><td>Mr. Fredi Müller</td><td>LI-9486 Schaanwald</td><td>10-24-1953</td></tr>
			<tr><td>Mr. Tim Gerber</td><td>CH-1773 Léchelles</td><td>12-25-1966</td></tr>
			<tr><td>Ms. Lilli Meyer</td><td>D-21207 Seevetal</td><td>11-29-1938</td></tr>
			<tr><td>Ms. Emilie Fischer</td><td>D-04299 Leipzig</td><td>11-7-1942</td></tr>
			<tr><td>Mr. Fredi Graf</td><td>CH-6534 S. Vittore</td><td>12-7-1971</td></tr>
			<tr><td>Ms. Cordelia Weber</td><td>CH-6543 Arvigo</td><td>2-23-1967</td></tr>
		</tbody>
	</table>
</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 ]