jquery-miller-columns

A jQuery implementation of Miller columns.

Fully customizable

• Use any data source you prefer (HTML, AJAX, JSON, JavaScript object, XML, etc.)
• Use it with or without any CSS framework (Bootstrap, Foundation, etc.)
• Extend or replace the default event listener (e.g. keyboard navigation)
• Assign the same node to multiple nodes, it even deals with circles
• Add more functionality (e.g. search, preview, toolbar, etc.)

Dependencies

• >= jQuery 1.7

Compatibility

• >= IE 8

Installation

Via npm:

Run in your console: npm install jquery-miller-columns

Via bower:

bower install jquery-miller-columns

Manual installation:

Download the latest release.

Easy to use

1. Add a DOM element with an id attribute to the document.

<div id="my-miller-column"></div>

2. Add jQuery and the ggergoMillerColumns plugin directly above the closing </body> tag.

<script type="text/javascript" src="url/to/js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="url/to/js/jquery.ggergoMillerColumns.js"></script>

</body>

3. Initialize the plugin.

$('#my-miller-column').ggergoMillerColumns(/* { settings... } */);

Settings, defaults

Parameter name	Default value	Description
root	1	root option id
column	'ul'	the column element tag name
option	'li'	the option element tag name
children	function (id) {}	return array of child id-s
optionContent	function (id) { return {}; }	return html content of option
optionAttr	function (id) { return {}; }	return object of option attributes
columnAttr	function (id) { return {}; }	return object of column attributes
selectCallback	function (option) {...}	callback function after selecting an option
onClick	function (event) {...}	onClick event listener