jQuery Finder .:. Mac OS X-like Column-view Navigation (alternative to treeview)

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Nam auctor, lectus vulputate
   • Some fileasd asd asdasd a
   • Some Imaged asd as
   • Some Folder
     • Some fileasd asd asdasd a
     • Some Imaged asd as
     • Some file
4. Consequat luctus
5. Nisl enim eleifend sem
6. Nam auctor, lectus vulputate

Code used for this demo

$('#finder').finder({
	title : 'jQuery Finder v0.6a',
	onRootReady: function(rootList,finderObj){
		debug('Root ready',arguments)
	},
	onInit : function(finderObj) {
		
		debug('Finder initialised',arguments)
		
		$('.ui-finder-action-refresh').click(function() {
			$('[name="refresh"]').click();
		});
		
		
		$('.ui-finder-action-open').click(function(){
			$('[name="select"]').click();
		});

		$('.ui-finder-action-current').click(function(){
			$('[name="getCurrent"]').click();
		});

		$('.ui-finder-action-destroy').click(function(){
			$('[name="createFinder"]').click();
		});

	},
	onItemSelect : function(listItem,eventTarget,finderObject){			
		var anchor = $('a',listItem),
			href = anchor.attr('rel');
		
	// Debug is a function specified in Finder script for debugging purposes
	// Remove it if unnecessary
		debug('onItemSelect - URL: ',href)
	
	// By returning false, the url specified is not fetched
	// ie. Do not display new column if selected item is not an image
		if(href.indexOf('.jpg') == -1) {return false;}
		
	},
	onFolderSelect : function(listItem,eventTarget,finderObject){
		var anchor = $('a',listItem),
			href = anchor.attr('rel');
			
		debug('onFolderSelect - URL: ',href)
	},
	onItemOpen : function(listItem,newColumn,finderObject){
		var anchor = $('a',listItem),
			href = anchor.attr('href');
		
		debug('onItemOpen - Column source: ',newColumn.attr('data-finder-list-source'))

	},
	onFolderOpen : function(listItem,newColumn,finderObject){
		var anchor = $('a',listItem),
			href = anchor.attr('href');
		
		debug('onFolderOpen - Column source: ',newColumn.attr('data-finder-list-source'))
	},

	toolbarActions : function() {
		return '\
		<div class="ui-finder-button ui-state-default ui-corner-left ui-finder-action-refresh" title="Refresh">\
			<span class="ui-icon ui-icon-refresh"/>\
		</div>\
		<div class="ui-finder-button ui-state-default ui-finder-action-open" title="Open ..">\
			>span class="ui-icon ui-icon-folder-open"/>\
		</div>\
		<div class="ui-finder-button ui-state-default ui-finder-action-current ui-corner-right" title="Get current">\
			>span class="ui-icon ui-icon-help"/>\
		</div>\
		<div class="ui-finder-button ui-state-default ui-finder-action-destroy ui-corner-all" title="Destroy">\
			>span class="ui-icon ui-icon-closethick"/>\
		</div>\
		';
	} 
	
});

Download

This is an Alpha release. It is tested but not thoroughly. There may be bugs, but I haven't found them yet. There are some issues with Internet Explorer (see browser support below). This release is (still) only for testing purposes and proof-of-concept.

Version 0.7.0.1 is the latest stable release ready for public use. Get it from Google Code. Zip file includes all necessary scripts and styles.

You are more than welcome to contribute with bug reports, code, and general ideas/comments. Please post at jQuery group or e-mail me at rudas dot n at gmail dot com.

Browser support

There's a minor bug in most browsers: Each column's width is not calculated properly and so either a long item will collapse to two lines (or more) the column will be cut off. I need some help on this one. Possible cause: some browsers don't take into consideration the width of the scrollbars when calculating widths (?)

Unless otherwise noted, the script looks and behaves correctly for the following browsers:

1. Firefox 2 & 3
2. Opera 9.62
3. Safari 3.1.2 - Webkit browsers like to collapse columns
4. Chrome 1
5. IE 8b2
6. IE 7 - CSS Bug with width of list items (help please)

Options

(This section needs update, see source of ui.finder.js for options)

title String

The title to be displayed at the top of the Finder

url String

URL of root list, used when list should be retrieved via ajax

onInit Function

Callback function for when a Finder is initialised

onRootReady Function

Callback function for when the root list of a Finder is ready

onItemSelect Function

Callback function when an item is selected. Note: If onItemSelect returns false, default behaviour is ignored, i.e. the URL is not fetched, and the new level is not shown.

onItemOpen is also not called.

onItemOpen Function

Callback function when an item is opened. Function is called when the user clicks on the anchor element (as opposed to the li element).

onFolderSelect Function

Callback function when a folder is selected. To specify a folder, add a class "folder" to your list element. Function is called when the user clicks on the list (li) element.

Note: If onFolderSelect returns false, default behaviour is ignored, i.e. the URL is not fetched, and the new level is not shown.

onFolderOpen Function

Callback function when a folder is opened. Function is called when the user clicks on the anchor element (as opposed to the li element)

animate Boolean

Slide in subsequent levels

Default: true

cache Boolean

If false, appends timestamp when retrieving subsequent levels (forcing browser to ignore cache). Useful if contents are updated frequently and user must always see new items.

Default: false

To do

1. Max width

   New column expands to fit available space.[optional]

2. Support non-ajax functionality

   When lists & file info already in dom. Display items several levels down.

3. Toolbar/Menubar

   Make public methods available via toolbar and/or menubar. (nearly there)

4. Search

   Search for specific items (coming next)