Responsive Miller Columns jQuery Plugin | Taxonomy Browser

jquery faceted taxonomy browser is a simple and intuitive design pattern for browsing hierarchical facets. It is based on a concept called “Miller columns“. If you are using the Mac OSX Finder app, you can see this feature in action.

Why are you using it?

It is becoming increasingly common to use facet categorization in organizations to manage large amounts of information. However, dials and their categories can be very broad and deep. This poses a challenge, especially for new employees, in learning vocabulary quickly.

Alternate approaches to displaying vocabulary, such as simple hierarchies, are not helpful for fast browsing (require the use of a back button) or are heavy (require scrolling).

The rating browser solves these problems by

  • To be visible at all times (no page scrolling)
  • Allow Fast Browsing – Easy back and forth navigation

How to make use of it:

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

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

2. Load jquery.taxonomyBrowser.keys.js to support keyboard navigation.

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

3. Load the handlebars.js required to generate the semantic HTML templates for Miller columns.

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

4. Create an HTML template based on handlebars.js 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 files 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'

simple jquery miller columns, faceted taxonomy browser interfaces Plugin/Github


See Demo And Download

Official Website(PebbleRoad): Click Here

This superior jQuery/javascript plugin is developed by PebbleRoad. For extra advanced usage, please go to the official website.

Related Posts

drag-drop-file-5x5-jq-uploader

Responsive Drag and Drop File Uploader/Download Plugin | 5x5_jq_uploader

5x5_jq_uploader plugin can be used to instantly create a drop file area and file queue with a little bit of preparation. Bootstrap is used for responsive planning…

Bootstrap-Dark-Mode

Stylesheet For Implementing Dark Mode with Bootstrap

Bootstrap Dark Mode provides a style sheet and two texts that allow you to implement Dark Mode on your website. Initially loaded based on user preferences, can…

responsive-navigation-menu

Multi-purpose Navigation Menu for Javascript Library | jQuery Corenav

coreNavigation is a multipurpose navigation menu for a jquery based javascript library, comes with more style, and is easy to integrate. 11 Default Menu 2 Responsive Navigation…

Simple-Multi-Select-Dropdown-Pure-Vanilla-Javascript

Simple Multi-Select Dropdown Pure Vanilla Javascript | multiSelect.js

MultiSelect.js is a simple, clean, and progressive JavaScript library designed for easy integration with any type of project or system. The design was heavily influenced by the…

Confetti-Falling-Animation-Effect-party

Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…

how-to-create-popup-in-html-with-css

How To Create A Popup in HTML with CSS

How to create popup in html with css – Popup without JavaScript is an elegant pop-up panel component with an animated scale, written in CSS. Have you…