I am implementing a jQueryFileTree (http://www.abeautifulsite.net/jquery-file-tree/) as a file browser and would like each file or directory the user clicks on to stay highlighted. I know this can be done using simple JavaScript or CSS, but I don't understand the source code well enough to know how or where to implement the highlighting. Can anyone point me in the right direction?
3 Answers
Well, you can capture a click using the click handler and add a class using addClass.
$('.thing-i-will-click-on').click(function() {
$(this).addClass('selected');
});
You can also remove a class using a similar method.
$('.selected').removeClass('selected');
Combining these two things should give you the desired result.
2 Comments
Eroth
Right. But if you are familiar with the jquery filetree source code, it isn't clear where to add a click function or 'selected' class
Mike Cluck
@Eroth You don't add it to the FileTree source. You run it in your own code.
So after a little tinkering I got it to work!
First you have to go into the jqueryFileTree.js and modify line 80 from this:
h($(this).attr('rel'));
to:
h($(this));
This will return the object that is clicked on instead of the file name. To get the file name within the function(file) within the definition of the .fileTree you'll have to use:
file.attr('rel');
Now you have the object and you can use this in the function(file) to highlight you code. (selected is a CSS class I created that changes the background color)
$(".selected").removeClass('selected');
file.addClass('selected');
Comments
$('#your_filelist_id').fileTree({
root: '/',
script: '/connectors/jqueryFileTree.php'
}, function(file) {
var flist = $('#your_filelist_id a[rel="' + file + '"]');
if(flist.hasClass('selected')) {
flist.removeClass('selected');
}
else {
flist.addClass('selected');
}
});