/jquery-miller-columns

A jQuery implementation of Miller columns.

Primary LanguageJavaScriptMIT LicenseMIT

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>
  1. 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>
  1. 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