Simple jQuery Miller Columns Plugin - Taxonomy Browser

Taxonomy Browser is a jQuery implementation of miller columns that allows the visitor to browse & select hierarchical data in a columns view as you seen in OS X Finder.

How to use it:

1. Load jQuery library and the jQuery taxonomy browser plugin in the document.

<script src="jquery.min.js"></script>
<script src="jquery.taxonomyBrowser.js"></script>

2. Load the jquery.taxonomyBrowser.keys.js for keyboard navigation support.

<script src="jquery.taxonomyBrowser.keys.js"></script>

3. Load the required handlebars.js to build html semantic templates for your Miller Columns.

<script src="handlebars.js"></script>

4. Create the handlebars.js based html template on your web page.

<script type="text/x-handlebars-template" id="taxonomy_terms">
  
  <div class="miller--terms--container">
    
    {{#if parent}}
      <div class="miller--terms--selection">          
        {{#each parent}} {{#if @index}} &raquo; {{/if}} <a href="#" class="crumb" data-depth="{{depth}}">{{name}}</a>{{/each}}
      </div>
    {{/if}}

    <ul class="terms">
      {{#each taxonomies}}
        <li class="term {{#if childrenCount}}has-children{{/if}}" data-id="{{id}}">
          <a href="{{url}}">
            <span class="title">{{label}}</span> 
            <em class="icon icon-arrow"></em> <em class="icon icon-search" title="Search for {{label}}"></em>       
          {{#if description}}<span class="description">{{description}}</span>{{/if}}
          </a>
        </li>
      {{/each}}
    </ul>
    
  </div>  
  
</script>

5. The plugin currently supports loading hierarchical data from JSON file or nested HTML lists.

<!-- Load data from an extenal JSON file -->
<div class="miller-container" data-source="json">       
  
</div>

<div class="miller-container" data-source="html">       
  
  <ul>
    <li>
      <a href="">Parent 1</a>        
      <ul>
        <li><a href="#">Children - 1</a></li>
        <li><a href="#">Children - 2</a></li>
        <li><a href="#">Children - 3</a></li>
        <li><a href="#">Children - 4</a></li>
        <li>
          <a href="#">Children 5</a>
          <ul>
            <li><a href="#">Children 51</a></li>
            <li><a href="#">Children 52</a></li>
            <li><a href="#">Children 53</a></li>
            <li><a href="#">Children 54</a></li>
            <li><a href="#">Children 55</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <a href="">Parent 2</a>        
      <ul>
        <li><a href="#">Children - 12</a></li>
        <li><a href="#">Children - 22</a></li>
        <li><a href="#">Children - 32</a></li>
        <li><a href="#">Children - 42</a></li>
        <li>
          <a href="#">Children 520</a>
          <ul>
            <li><a href="#">Children 521</a></li>
            <li><a href="#">Children 522</a></li>
            <li><a href="#">Children 523</a></li>
            <li><a href="#">Children 524</a></li>
            <li><a href="#">Children 525</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>


</div>

6. Initialize the plugin.

$('.miller-container').taxonomyBrowser({
  // options here
});

7. Full plugin options with default values.

// Data Source: html or json
source: 'json',

// Path to JSON data
json: 'json/taxonomy.json', 

// Root Taxonomies have a parent value of null
rootvalue: null, 

// Class of each miller column
columnclass: '.miller--column', 

// Number of columns
columns: 3, 

// Height of each column
columnheight: 400,

//  ID or index of the Taxonomy Where you want to start
start: '' 

// Handlebars template id
template: 'taxonomy_terms'

---

This awesome jQuery plugin is developed by PebbleRoad. For more Advanced Usages, please check the demo page or visit the official website.