jstree 简单解决方案之节点换肤


jstree王者归来： QQqun 105564508 希望能与各位在线交流探讨



写在前面 ：
前一篇文章jstree 简单解决方案，主要讲了jstree的一些基本用法，在这里讨论一下jstree的节点换皮肤。
当然本文还是基于 jstree 0.99a 版本和 jquery-1.3.2.js为基础写的。

<script type="text/javascript" src="jquery-1.3.2.js"></script><script type="text/javascript" src="jquery.tree.js"></script><script type="text/javascript" language="javascript">  <!--      $(function () {     $.ajaxSetup({cache:false});//ajax调用不使用缓存    $("#vcsTree").tree({//创建树开始      data : {     type : "json",//类型为json    async : true,//动态操作    opts : {    method : "get",     url : "async_json_data2.json"    }     },//end data     ui:{     theme_name : "classic"     },     lang:{    loading : "目录加载中……"   },  rules : { type_attr: "rel",     //设置节点类型valid_children : "root"  // 只有root节点才能作为顶级结点},     types :{     "default" : {     clickable : true,     draggable : false    //设置节点不可拖拽     },     "root" : {valid_children : "folder", //设置下级节点类型，可是数组icon : { image : "root.png"//设置当前节点icon图片,路径自己决定} },   "folder" : {valid_children : "leaf",icon : { image : "folder.png"}},"leaf" : {valid_children : "none",icon : { image : "leaf.png"}}     }        });    });   //--></script><div id="container"> <h2 name="code">Already fixed it with some jquery code:instead of //jstree的types设置 ，和上面的代码并无多大区别，只是图片方式和jstree的提取方式是一样的，从一张png图片分割出自己想要的部分(个人说法)。types : {"default" : { icon : { image : 'icon.png', position : '0 0' } }"root" : { icon : { image : 'icon.png', position : '-16px 0' } }"folder" : { icon : { image : 'icon.png', position : '-32px 0' } }"page" : { icon : { image : 'icon.png', position : '-32px 0' } }}//注释1 ，放在tree初始化代码后I wrote (after initilization tree)$("li[rel='root'] > a ins").addClass("root");$("li[rel='folder'] > a ins").addClass("folder");$("li[rel='page'] > a ins").addClass("page");//注释2 ，添加在style.css文件内and in style.css.tree-classic li.open a ins.root, .tree-classic li.open a ins.folder, .tree-classicli.open a ins.page{background-image:url('icons.png');}.tree-classic li.open a ins.root{background-position:0 -48px;}.tree-classic li.open a ins.folder{background-position:0 0;}.tree-classic li.open a ins.page{background-position:-16px 0;}

在firefox上效果：


本代码见附件： themes.rar 请下载使用后记得留言您的更正结果，期待各位的答复 $("li[rel='root'] a:first-child ins").addClass('root'); $("li[rel='folder'] a:first-child ins").addClass('folder'); $("li[rel='leaf'] a:first-child ins").addClass('leaf');

本段 css代码 是添加在jstree classic 皮肤包的style.css文件里：
功能： 添加 在IE 显示对应节点图标 的样式

/* NODE ICONS  ADD BY GAOJC*/.tree-classic li.open a ins.root { background:url("root.png") no-repeat; }.tree-classic li.open a ins.folder { background:url("folder.png") no-repeat; }.tree-classic li.open a ins.leaf { background:url("leaf.png") no-repeat; }

但结果令人失望，IE还是不支持节点换肤，哪位能解决此处问题的回复一下。谢谢


[{attributes: {id : "rootnode",rel: "root"},data : {title: "rootnode",icon:"root.png"},state: "closed"]

原理如图示：
4 楼 tangyuanjian 2010-07-13 你的例子在IE6下看没有成功！ 5 楼 ihibernate 2010-07-13 tangyuanjian 写道你的例子在IE6下看没有成功！
请仔细看3楼的回复，那里有测试成功的范例 6 楼 tangyuanjian 2010-07-13 你就给一个正确的嘛，方正你说的三个方法都试了，还是不行！ 7 楼 ecustz 2010-08-13 以前不怎么明白，现在感觉jstree真不错啊，收藏一下