The finder pattern mimics the OS X Finder columns view. This is very useful for navigating a simple or complex hierarchy of items. It can be used as part of a master detail with the finder on the left or inline on the page (below).

The finder has full keyboard controls. To enable it you must first click anywhere in the finder. Then you can use up/down to go up and down in a given column and left/right to go forward and back through the columns. When going left/right it will go to previously selected rows first, or the first row if none is selected.

If you want your finder to always stay the full width of the panel it is in (like in the west panel on this page) add a class of fullwidth to the element you apply the finder script to.

HTML

You can provide the content to the finder in three ways:

By default the script will look for a UL inside the targeted element.
You can pass in a jQuery selector of where to find the UL
You can pass in a URL to get the UL via Ajax

How to structure each item:

If an LI has both an A and a UL inside it, the script will mark it as a folder and treat it accordingly.
If an LI has only an A, it will treat it as a "page". If the A has only a hash (#test), it will look for that content on the page and place it in the target element. If it can't find the hash, the script will do nothing. This is also a way to fire an onclick for that A element if you want to do something fancy. If there is a URL, the script will make an Ajax request and put the result in the target element.
If an LI has a class of "ajax" the script will treat it as a folder. When clicked it will use the href in the A element to make an Ajax request for additional navigation structure. The Ajax response will be treated the same as outlined in this list.

CSS

All CSS that is REQUIRED by the script is added by the script (floats for the columns, overflow for the scrolling, etc). In it's default state, it may not look very good, but will function. You will likely want to set a few other things, but they are not technically required.

Available classes

.ui-finder - Put on the wrapping element that was targeted to begin with. For $("#test").finder(), it would be the #test element.
.ui-widget-content - Put on the wrapping element that was targeted to begin with. For $("#test").finder(), it would be the #test element.
.ui-finder-wrapper - Div that is inside the .ui-finder but wrapping the individual columns. This allows the horizontal scrolling.
.ui-finder-list - Put on the DIV wrapping the UL for each column.
.ui-finder-folder - Put on the LI of any item that is deemed a folder (has a sub UL or is Ajax).
.ui-finder-page - Put on the LI of any item that is deemed a page (does not have a sub UL or is marked as an Ajax folder).
.ui-finder-loading - When an A is clicked that makes an Ajax request, a SPAN with this class is added inside of the A element. You can make this show a loading animation or whatever you want.
.ui-state-active - Put on any LI in the heirarchy that is in the active path (folder or page)
.ui-state-active-now - Put on the LI of the item that is currently active (folder or page)

API

These are the variables that you can set to turn on and off various options.

$("#example").finder({columnHeight:200});

Name	Type	Default	Description
source	string		Either the selector of where an inline UL is or the URL to an ajax file
easing	string	linear	easing animation that is used to slide the finder to the next column
duration	number	500	how long the slide animation will take
target	string		Selector where the script should put any "page" content. By default it puts it in the element directly after the one that the script is set on.
columnHeight	number	300	height of the column (which inherently defines the height of the finder)
columnWidth	number	200	width of a column. If 0, columns will size to their content
columnScroll	string	auto	For the scrollbar on each column. Auto = only show when content is long enough. scroll = always show scrollbar (for consistency if desired). false = do nothing, control in css
numColumns	number		how many columns to show when doing a dynamic width finder. available width is split between the number of desired columns (300/2 = 150 wide columns)
width	number	600	width of the finder
scroll	string	auto	Should the finder have a horizontal scrollbar. Auto = only show when content is wide enough. scroll = always show scrollbar. false = do nothing, control in css
loadingText	string	Loading...	Text to be inserted in the loading span when waiting for content.
gotoClass	string	goto	Class that identifies results that should load as a full page, not in the target location
focusClass	string	ui-state-focus	Class that is used when an item is focused
activeClass	string	ui-state-active	Class that is used when an item is in the selected path
activeNowClass	string	ui-state-active-now	Class that is used when an item is in the selected path but is the currently active item
finderClass	string	ui-finder	Class added to the target element and used as a prefix for a number of other internal classes
prev	string		Selector that identifies the "previous" button for this finder
next	string		Selector that identifies the "next" button for this finder
onInit	function		callback that fires when the finder is done loading. passes in the finder "function(finder){}"
onSelect	function		callback that fires when any link is clicked. passes in the li parent of the clicked link "function(li){}"
onMove	function		callback that fires when the move method is called (forward/back). passes in the column you are moving TO "function(column){}"
onFolderSelect	function		callback that fires after a folder is selected (but before it loads)
onFolderLoad	function		callback that fires after a folder is loaded via ajax (one time only)
onFolderDisplay	function		callback that fires after a folder is displayed (multiple times)
onPageSelect	function		callback that fires after a page is selected (but before it loads)
onPageLoad	function		callback that fires after a page is loaded via ajax (one time only)
parseData	function		function that can be run against data that returns during an ajax request for additional navigation. passes in the data that was returned. This would allow for json (etc) to be sent and then put into a structure on the page to save filesize. "function(column){}"

Options = The script only recognizes these values.

There is no currently exposed API via the IxF.