hummingbird-dev / hummingbird-treeview

A powerful and fast jQuery treeview plugin
MIT License
62 stars 23 forks source link

Question: How do I change the text color of end node? #26

Open hazelcj opened 2 years ago

hazelcj commented 2 years ago

This tool is awesome.

And I have a question to reach out: how do I change the foreground text color of end node which class is 'hummingbird-end-node' like: item = item + '<label ' + data_str + '>' + "\n"; item = item + ' ' + treeText; item = item + '' + "\n";

I have defined data_str in 'li' tag: li id="id_str" data-str='style="color:green;" '>--Robin Wright</li But the text color is still: label style="color: rgb(0, 0, 0);"

Appreciate if you have time to help on this.

hummingbird-dev commented 2 years ago

Hi, Thanks for using the hummingbird-treeview.

Normally you can define the colors via the options prior to initializing the treeview: $.fn.hummingbird.defaults.hoverColorText2 = "#6879e3"; To change the text color on mouse hover use: $.fn.hummingbird.defaults.hoverColorText1 = "#e36834"; And to change the background color on mouse hover use: $.fn.hummingbird.defaults.hoverColorBg1 = "#5acb29";

However, I was able to reproduce what you have observed. It's true, data-str='style="color:green;"' does not work. In general "color" will not work here. Thanks for pointing to this issue. I will add this info to the documentation. The reason is, that the text-color changes dynamically on hover. Even if "hover" is disabled, the colors are overwritten by the above options.

Therefor I have now included new data-* attributes to change text colors and backgrounds for individual nodes via the data-nonHoverColor, data-nonHoverColor_bg, data-HoverColor, data-HoverColor_bg

Have a look here: https://github.com/hummingbird-dev/hummingbird-treeview#2-simple-pseudo-html-plus-height-scroll-id-data-id-data-css-data-str-data-nonhovercolor-data-nonhovercolor_bg-data-hovercolor-data-hovercolor_bg