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
  4. Consequat luctus
  5. Nisl enim eleifend sem
  6. Nam auctor, lectus vulputate


Public methods

  1. $(selector).finder([options])
  2. $(selector).finder('select',URL || DOM or jQuery object || Array of URLs)
  3. $(selector).finder('current')
  4. $(selector).finder('refresh')
You can also use the toolbar buttons for these actions.

Testing methods

Just some methods to test the queue. Create finder before using testing methods

  1. Calls 'select' method 6 times at an interval of 500ms
  2. Calls 'select' method for an array of URLs. Useful if you want to select an Item or Folder which is multiple levels down.

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>\
		';
	} 
	
});

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