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

Google-Translate-Dropdown-Customize-With-Country-Flag

Google Translate Dropdown Customize With Country Flag | GT API

Flag google translates jQuery text that takes advantage of the Google Cloud Translation API to translate web content between languages by selecting a country from the dropdown…

Bootstrap-Fileinput

HTML 5 File Input Optimized for Bootstrap 4.x./3.x with File Preview | Bootstrap Fileinput

bootstrap-fileinput is an improved HTML 5 file input  Bootstrap 5.x, 4.x and 3.x with file preview for different files, provides multiple selections, resumable section uploads, and more….

HStack-and-VStack-in-CSS

CSS Layout Components Horizontal/Vertical Stack | HStack and VStack

HStack and VStack in CSS – CSS layout components that (basically) stack anything horizontally and vertically. A pure CSS library that makes it easy to stack elements…

Floating-Whatsapp-Chat-Button

How to Add Floating Whatsapp Chat Button In HTML | venom-button

Venom Button is a very simple plugin for the jQuery floating WhatsApp button. Adds a floating button to your site that calls WhatsApp Click to Chat API. It will automatically start the WhatsApp…

Data-Table-Generator-Tabulator

Interactive Data Table Generator with JS/jQuery and JSON | Tabulator

Tabulator allows you to create interactive tables in seconds from any HTML Table, JavaScript array, AJAX data source, or JSON format data. Just include the library in your…

alert-confirm-prompt-attention-js

Simple Alert, Confirm, Prompt Popup Using Vanilla JavaScript Library | attention.js

JavaScript provides various built-in functionality to display popup messages for different purposes. Attention JS is a vanillaJS plugin used to create a custom alert, confirm, or Prompt…

Leave a Reply

Your email address will not be published. Required fields are marked *