An implementation of Miller columns with jQuery!
It's a work in progress, so use it carefully!
If you want to see this plugin in action, there is a demo.
- Ajax call to retrieve data.
- Keyboard navigation.
- Full customizable preview pane.
- Full customizable toolbar.
- Redimensionable columns.
There is no dependencies needed to use this plugin. To use it:
- Clone the repository or download the source in a directory.
- Add this line in the head of your html page:--
<link href="url/to/css/jquery.miller.css" media="screen" rel="stylesheet" type="text/css" />- Add a
divin the body of your html page. - Add these lines at the end of the body of your html page:
<script type="text/javascript" src="url/to/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="url/to/js/jquery.miller.js"></script>- Create a JavaScript script with this content and add it t the end of the body of your html page:
$(document).ready(function() { $('div').miller() });You can pass an object litteral to the miller function to customize behavior of the plugin.
The default values are :
{
url: function(id) { return id; }, // generate url for ajax call, id is the value of the node ID
minWidth: 40, // minimum width of one column
tabindex: 0, // default tabindex if it is undefined on the DOM element
carroussel: false, // If set to true, the user will go to the first item of the column if it use ↓ on the last item
toolbar: {
options: {} // Add callbacks here to handle actions in the toolbar, see the demo for more informations
},
pane: {
options: {} // Add callbacks here to handle actions in the pane, see the demo for more informations
}
}The ajax call must return a JSON array with the following structure:
[
{ 'id': 'ID of node 1', 'name': 'Name of node 1', 'parent': false }, // this node has no child
{ 'id': 'ID of node 2', 'name': 'Name of node 2', 'parent': true }, // this node has some children
{ 'id': 'ID of node 3', 'name': 'Name of node 3', 'parent': false }, // this node has no child
// and so on…
]
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent