Simple jQuery Miller Columns Plugin - Taxonomy Browser
File Size: | 329 KB |
---|---|
Views Total: | 2995 |
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}} » {{/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.