New Post has been published on Html Use
New Post has been published on http://www.htmluse.com/hcolumns-looks-like-mac-os-x-finders-column-view/
hColumns - Looks like Mac OS X Finder's column view
Download Demo
hColumns is a jQuery plugin that looks like Mac OS X Finder’s column view for the hierarchical data.
1. INCLUDE CSS AND JS FILES
<!-- Change this if you have another CSS Rest framework installed (e.g. Bootstrap) --> <link rel="stylesheet" href="css/reset.css" type="text/css"> <!-- Feel free to modify this for colors or width to match your need --> <link rel="stylesheet" href="css/hcolumns.css" type="text/css"> <script src="js/jquery-1.9.1.min.js"></script> <script src="js/jquery.hcolumns.min.js"></script>
2. HTML
<div id="columns"></div>
3. JAVASCRIPT
$(document).ready(function() var nodes = 0: [ id: 1, label: "My Favorite Sites", type: "folder" , id: 2, label: "Empty Folder", type: "folder", id: 3, label: "Direct link to Google", type: "link", url: "http://www.google.com" ], 1: [ id: 11, label: "Tech", type: "folder" , id: 12, label: "Food", type: "folder" ], 11: [ id: 111, label: "PHP", type: "folder" , id: 112, label: "Javascript", type: "folder" , id: 113, label: "Hacker News", type:"link", url: "https://news.ycombinator.com/news" ], 12: [ // empty node ], 111: [ id: 1111, label: "PHP Engine", type: "folder" , id: 1112, label: "PHP Extension", type: "folder" , ], 112: [ id: 1121, label: "node.js", type: "link", url: "http://nodejs.org/" ], 1111: [ id: 11111, label: "PHP: Hypertext Preprocessor", type: "link", url: "http://php.net" ], 1112: [ id: 11121, label: "Twig", type: "link", url: "http://twig.sensiolabs.org/" ], 2: [ // empty node ] ; $("#columns").hColumns( nodeSource: function(node_id, callback) if(node_id === null) node_id = 0; if( !(node_id in nodes) ) return callback("Node not exists"); return callback(null, nodes[node_id]); ); );
