Change Icon of a tree node

[roli]

Hello everybody

I try to change the icon of a tree node, but after hours of searching
now I didn't find an example,
and I'm not able to do it. I hope anybody can help me.

There seems not to be a direct API call to change the icon (would be
very helpful). So I have defined a new type:

$("#basic_html").tree({
ui : {
theme_name : "classic"
},
rules : {
multiple : "ctrl"
},
types : {
"inactive" : {
icon : {
image : '../pics/inactive_icon.png'

}
}
},

The image path should be OK, I also use it in a create() API call, and
that works.

In my javascript code I try to set this type:
$.tree.reference("#basic_html").set_type("inactive");

I have also tried to refresh the node:
$.tree.reference("#basic_html").refresh("#"+id);

But nothing happens.

I also would like to change the font color in this code. But I
couldn't find out how this is done.

Can anybody tell me what I am doing wrong?

Thanks Roland

[roli]

Ahh, after some more hours, I'm able to answer my own question:

In the theme (classic) I added the following two lines to style.css:

.tree-classic li a.inactive { color:#999999 }
.tree-classic li a ins.inactive { background-position:-16px -48px;
background-repeat:no-repeat; }

I added a new icon at position -16px -48px to icons.png

The I use the following lines in my javascript code to change the
appearance of the nodes:

var node = $.tree.reference("#basic_html").get_node("#"+id);

node.children("a").addClass("inactive");
node.children("a").children("ins").addClass("inactive");

Cool, isn't it?

[John Arrowwood]

Cool, but more work than it needed to be..  Once you assigned the 'inactive' class to the anchor tag, you didn't need to add it to the contained <ins> tag.  Just modify your CSS to use .tree-classic li a.inactive ins {...} and you can save yourself time and code.

And in fact, you could have saved even more time by just adding the class to the node itself.

.tree-classic li.inactive a { color:#999999 }
.tree-classic li.inactive a ins { background-position:-16px -48px;background-repeat:no-repeat; }

$.tree.reference("#basic_html").get_node("#"+id).addClass('inactive');

--
You received this message because you are subscribed to the Google Groups "jsTree" group.
To post to this group, send email to jst...@googlegroups.com.
To unsubscribe from this group, send email to jstree+un...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/jstree?hl=en.

--
John Arrowwood
John (at) Irie (dash) Inc (dot) com
John (at) Arrowwood Photography (dot) com
John (at) Hanlons Razor (dot) com
--
http://www.irie-inc.com/
http://arrowwood.blogspot.com/

[roli]

Hy John

Well, that's a good idea, but I think the behaviour is different.

My solution only changes the appearance of that single node.

Your solution also changes the appearance of all children of that
node.

Both ways can make sense, right?

Regards Roland

> > jstree+un...@googlegroups.com<jstree%2Bunsu...@googlegroups.com>

> > .
> > For more options, visit this group at
> >http://groups.google.com/group/jstree?hl=en.
>
> --
> John Arrowwood
> John (at) Irie (dash) Inc (dot) com
> John (at) Arrowwood Photography (dot) com
> John (at) Hanlons Razor (dot) com

> --http://www.irie-inc.com/http://arrowwood.blogspot.com/- Zitierten Text ausblenden -
>
> - Zitierten Text anzeigen -

[Chris]

Slight css change will give you what you want

.tree-classic li.inactive > a { color:#999999 }

.tree-classic li.inactive > a ins { background-position:-16px

-48px;background-repeat:no-repeat; }

The > applies the style to the direct child of the LI node, not all decendants

[John Arrowwood]

I think you may be right.  Doesn't it solve that to turn it into li.inactive>a ?

To unsubscribe from this group, send email to jstree+un...@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/jstree?hl=en.

--
John Arrowwood
John (at) Irie (dash) Inc (dot) com
John (at) Arrowwood Photography (dot) com
John (at) Hanlons Razor (dot) com

[roli]

You all are right, thanks.

CSS selektors are quite tricky. But I begin to understand now.

> > <jstree%2Bunsu...@googlegroups.com<jstree%252Bunsubscribe@googlegroups.­com>

>
> > > > .
> > > > For more options, visit this group at
> > > >http://groups.google.com/group/jstree?hl=en.
>
> > > --
> > > John Arrowwood
> > > John (at) Irie (dash) Inc (dot) com
> > > John (at) Arrowwood Photography (dot) com
> > > John (at) Hanlons Razor (dot) com

> > > --http://www.irie-inc.com/http://arrowwood.blogspot.com/-Zitierten Text