jstree 改变节点图片-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_9666/article/details/82000417

本文介绍了一个针对jsTree插件的默认主题样式定制方案，详细展示了如何通过CSS来修改树状结构中不同元素的外观，包括节点图标、加载状态、选中效果等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/*
* jsTree default theme 1.0
* Supported features: dots/no-dots, icons/no-icons, focused, loading
* Supported plugins: ui (hovered, clicked), checkbox, contextmenu, search
*/

.jstree-default li,
.jstree-default ins { background-image:url("d.png"); background-repeat:no-repeat; background-color:transparent; }
.jstree-default li { background-position:-90px 0; background-repeat:repeat-y; }
.jstree-default li.jstree-last { background:transparent;}

/*展开合并加减样式 IE8*/
.jstree-default .jstree-open > ins { background-position:-72px 0 ;}
.jstree-default .jstree-closed > ins { background-position:-54px 0;}
.jstree-default .jstree-leaf > ins { background-position:-36px 0; }

.jstree-default .jstree-hovered { background:#e7f4f9; border:1px solid #d8f0fa; padding:0 2px 0 1px; }
.jstree-default .jstree-clicked { background:#beebff; border:1px solid #99defd; padding:0 2px 0 1px; }

.jstree-default a .jstree-icon { background-position:-76px -34px; padding-top:2px;}

/*叶子节点的样式*/
.jstree-default a .jstree-icons { background-position:-76px -34px; padding-top: 2px;}

/*叶子节点样式
.jstree-default li > ul > li > a .jstree-icon { background-position:-76px -34px; }*/

/*书展开样式*/
.jstree-default .jstree-open > a .jstree-icon { background-position:-56px -36px; }
.jstree-default a.jstree-loading .jstree-icon { background:url("throbber.gif") center center no-repeat !important; }
/*书合并样式*/
.jstree-default .jstree-closed > a .jstree-icon { background-position:-56px -16px; padding-top:2px;}

.jstree-default.jstree-focused { background:#ffffee; }

.jstree-default .jstree-no-dots li,
.jstree-default .jstree-no-dots .jstree-leaf > ins { background:transparent; }
.jstree-default .jstree-no-dots .jstree-open > ins { background-position:-18px 0; }
.jstree-default .jstree-no-dots .jstree-closed > ins { background-position:0 0; }

.jstree-default .jstree-no-icons a .jstree-icon { display:none; }

.jstree-default .jstree-search { font-style:italic; }