jQuery TickBack`
What is it? A jQuery plugin to animate the filtering of a list.
Requirements? A proper jQuery version (1.8+), jQuery Transit (currently an unofficial unmerged fork with proper browser support). Also: the items in the list shoudl have the same dimensions.
Affects on load time? Apart from the big jQuery, we load jQuery Transit (5.8kB). TickBack is under 4kB big.
How does it work? You specify on initial load of the plugin a callback function, which is used to determine if an element on the list should be filtered out.
Example
$('ul').tickback({ duration: 600, animationType: 'move', filterCallback: function(elm) { return !elm.hasClass('my-filter'); }, itemInactiveStyles: { opacity: 0.4 }, itemActiveStyles: { opacity: 1 } });
Documentation
Methods provided
var myList = $('.my-list').tickback(options)
— on initial load, the options should be passed. There is only one required option:filterCallback
(see below).myList.tickback('render'[, options])
— triggers rerendering, for example if you clicked a link that filters the list, or typed in a search.myList.tickback('setDefaults', options)
— overwrites default values for the passed new ones.myList.tickback('destroy'[, options])
— removes classes and styles from the list.
Options that can be passed:
The options hash accepts the following options:
filterCallback
[function, required] — callback on how to filter the items. Should return a boolean.afterAnimationCallback
andbeforeAnimationCallback
[functions] – can be used to let you know when the animations start and end.animationType
["move"
(default),"fade"
,"scale"
] — how the elements are animated.duration
[int] — amount of milliseconds the animation has to last.easing
[string] — any easing type the jQuery Transit plugin accepts. See their documentation.. Eg"cubic-bezier(0,0.9,0.3,1)"
or"in-out"
.itemInactiveClass
[string] — which class there shoudl be on the inactive items. Can be used for additional styling if you want to, or by your own jQuery code.itemInactiveStyles
,itemActiveStyles
,itemViaStyles
[objects] — shoudl contain CSS properties as keys and their wanted values as content. Thevia
one is not used by the move animation type.sortCallback
[function] — Gets two jQuery arrays with one element in them: objecta
andb
. The function should compare something in those elements, for example the text or a class on it, and return either-1
(a
comes beforeb
),0
(a
andb
are sorted equally) or1
(a
comes afterb
).sortDom
[bool,true
by default] — whether the DOM should be ordered after the animation is complete. (Keep true if you want screenreaders to properly speak out the order of elements. An ARIA live region is used to notify of the change.)sortItems
[bool,true
by default] — if true, the active items are placed as first in the DOM.
Requirements
- jQuery (1.8+), can be downloaded from jQuery.com.
- jQuery Transit. This is a custom build which can be found at symbiose's Transit repo.
- Every block in the list should have equal dimensions.
Thanks
- @SURFnet
License
MIT Licensed. Do whatever you want with it, but don't sue me when it crashes your server and you lose all your money. See also the file LICENSE
.
Upcoming features
- Properly hiding filtered items (instead of giving them alternative styles).