Simple jQuery Miller Columns Plugin - Taxonomy Browser

Simple jQuery Miller Columns Plugin - Taxonomy Browser
File Size: 329 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

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}}

    <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}}

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 class="miller-container" data-source="html">       
      <a href="">Parent 1</a>        
        <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>
          <a href="#">Children 5</a>
            <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>
      <a href="">Parent 2</a>        
        <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>
          <a href="#">Children 520</a>
            <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>


6. Initialize the plugin.

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