$("#demo2").columnview();
Multi-selection via the Shift or meta (Command/Apple on Mac, Control on Windows/Linux) is available with all jQuery versions, though true shift-clicking to select a range is only available with 1.4.x due to changes in the .index() method.
$("#demo2").columnview({
multi:true
});
By default on Firefox and Webkit browsers, columns will automatically size horizontally to contain their contents. You may choose to use fixed-width columns instead. On IE, Webkit and Opera, the text will automatically be truncated with ellipsis. Note that columns are always fixed-width on IE due to its handling of automatic widths for absolutely positioned elements. I'm still looking for a reliable cross-platform way to truncate text that performs well. You may notice that text runs under the triangle widgets also. This is easy enough to fix with CSS, though I leave that to you, since it won't work consistently if you're using images as backgrounds in the widget.
$("#demo3").columnview({
multi:true,
fixedwidth: '150px'
});
CSS:
.containerobj .widget
{
background-color:white;
}
.containerobj .active .widget
{
color: white;
background-color:#3671cf;
}
.containerobj .inpath .widget
{
background-color:#d0d0d0;
}
In order to show something more interesting in the rightmost pane when a user drills all the way down to the lowest level in a hierarchy, we provide a callback to the 'preview' setting. The calling object is passed to the preview function.
Here were using a simple function to display the text in reverse, but you could use this callback to make AJAX calls to load external data, etc.
// Reverse the text of the item in the preview pane
$("#demo4").columnview({
preview: function(element) {
var reversed = $(element).text().split("").reverse().join("");
$(element).parents().find('.feature').text(reversed);
}
});
To find selected items, you should construct a selector that gathers all items that have the active within the columnview widget. you can then iterate over the results.
$('#demo5').columnview({multi:true});
$('#getactive').click(function(){
$.each('#demo5 a.active', function(element,i){
$(element).css({'background-color':'orange'});
// You could also add these to an array, etc.
});
});
You can trigger a callback function based on the currently selected item. At the moment, this only works when multi is set to false.
$('#demo6').columnview({
onchange: function(element) {
$("#thecurrent").text($(element).text());
}
});
Current Item: You may not want to show a preview pane at all, so now you can with preview:false.
$('#demo7').columnview({
preview: false
});