jquery file tree highlight selected

Question

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?

score 1 · Answer 1 · answered Jul 06 '15 at 17:43

1

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.

answered Jul 06 '15 at 17:43

Mike Cluck

31,869
13
80
91

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 – Eroth Jul 08 '15 at 16:20
@Eroth You don't add it to the FileTree source. You run it in your own code. – Mike Cluck Jul 08 '15 at 16:23

score 1 · Answer 2 · answered Jun 07 '16 at 17:48

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');

score 0 · Answer 3 · answered Jan 03 '16 at 22:48

$('#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');
  }
});

jquery file tree highlight selected

3 Answers3