javascript - change colour of the default jstree search and error if not found in the node list - Stack Overflow

admin管理员组

文章数量:1316681

I am using jstree plugin to search for nodes. It works and when found the defaul color is very bright blueish color. How do you chanage the default color to something else.

Also, if the search text is not found, I would like to be able to display error to the users. Any ideas how I would do this?

function myFunction()
{
$(document).ready(function(){

var value=document.getElementById("search_field").value; 

    $("#search_tree").click(function () { 

        $("#tree").jstree("search",value) 
 }); 

 }); 
}

This is my function that returns if it finds the text in the node list.

I would like to highligh the node with navy blue and also, move the window to that node (sometimes, three maybe too big and browser window needs to be adjusted to see the highlighted node). Very new to this type of scripting language and appreciate any input. Thanks.

I am using jstree plugin to search for nodes. It works and when found the defaul color is very bright blueish color. How do you chanage the default color to something else.

Also, if the search text is not found, I would like to be able to display error to the users. Any ideas how I would do this?

function myFunction()
{
$(document).ready(function(){

var value=document.getElementById("search_field").value; 

    $("#search_tree").click(function () { 

        $("#tree").jstree("search",value) 
 }); 

 }); 
}

This is my function that returns if it finds the text in the node list.

I would like to highligh the node with navy blue and also, move the window to that node (sometimes, three maybe too big and browser window needs to be adjusted to see the highlighted node). Very new to this type of scripting language and appreciate any input. Thanks.

• javascript
• jquery
• jstree

Share Improve this question Follow edited Mar 5, 2013 at 20:06 jonvuri 5,94033 gold badges2727 silver badges3333 bronze badges asked Feb 19, 2013 at 17:08 user1471980user1471980 10.7k4949 gold badges147147 silver badges246246 bronze badges 1

• Have you tried to edit the theme/default/style.css file to fit your needs ? – Philippe Boissonneault Commented Mar 5, 2013 at 20:14

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9 +25

To change the color you just need to edit line 45 of the theme CSS file:

.jstree-default a.jstree-search { color:aqua; }

Change aqua to whatever you like.

One further suggestion -- there are a bunch of different shades of blue used for various things in the style.css file for jsTree. My web page has a dark background, so the colors did not look good.

To simplify color changes, I created some variables at the top of the style.css file like this:

:root {
    --jstree-hover-color: transparent;
    --jstree-clicked-color: #4a4a4a;
    --jstree-search-color: #E0CD1F;
}

Then I replaced the hard-coded colors in the CSS with these variables. That way if I don't like a color, I can change it in one place and refresh the page to see how it looks.

In your case, this is where you change the color for the search results (this is from jsTree v3.x). I mented out the existing color value so I would know what it was originally:

.jstree-default .jstree-search {
    font-style: italic;
    /*color: #8b0000;*/
    color: var(--jstree-search-color);
    font-weight: bold;

本文标签： javascriptchange colour of the default jstree search and error if not found in the node listStack Overflow