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 class="title">JsTree</h2>
<div id="vcsTree"></div>
</div>
特别提示 :
jstree0.99a的 换肤固然简单,但是还是存在bug的,不支持IE6,7系列浏览器,但对firefox,和chrome浏览完全兼容,具体bug修正jstree作者已在最新版jstree1.0进行修正。
如果有已经解决此bug的兄弟,希望能告知一下各位兄弟,把代码贴出来大家学习一下。
写在最后:
这里是国外的一位哥们对此bug的修正,他并未修改jstree的源代码,只是在jstree初始化代码后添加了一段代码。
根据他的改写,在IE上不同节点还是不能显示不同的图标,所以感觉 自己 水平有限 ,希望能和各位探讨学习。
仅需修改两处代码:
1. 如注释1处所写,放在tree初始化代码后。
2. 如注释2, 添加在style.css文件内
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-classic
li.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 请下载使用后记得留言您的更正结果,期待各位的答复
- 大小: 3.3 KB
- 大小: 18.4 KB
分享到:
相关推荐
js树形菜单组件,主要解决大数据加载节点卡死问题。
//JS实现treeview中选中父节点,子节点也选中,如果子节点全部选中,自动选中父节点 //仅支持TreeView //调用方法 TreeView.Attributes.Add("onclick", "OnTreeNodeChecked()");
jsTree中文api文档,js操作树可移动节点 增加修改删除节点.jsTree中文api文档,js操作树可移动节点 增加修改删除节点.
jsTree实例,jsTree实例,jsTree实例
jstree创建无限分级树的方法【基于ajax动态创建子节点】.docx
jsTree操作 jsTree插件简介 Web开发使用jsTree实例
jsTree-directive, jsTree的Angular 指令 文档 jstree指令jsTree的Angular 指令文档文档使用 bower 安装$ bower i jstree-directive教程使用 jsTree,Angularjs和Expressjs语言构建一个基于We
JS Tree树形菜单,确实是够经典的WEB版树形菜单特效,带有节点连接线的树状折叠菜单,点击的时候会展开子菜单,适合用于WEB版的信息管理系统、CMS后台系统中,你喜欢的话,你可以用在任意你想要的地方。
jsTree大集合 jsTree大集合 jsTree大集合
jstree 1.0 最新版jstree 1.0 最新版jstree 1.0 最新版jstree 1.0 最新版jstree 1.0 最新版
jsTree中文文档,其中包括各种插件中文介绍,提供广大学习jsTree的朋友们
jstree ajax ddd jstree ajax ddddd jstree ajax dddddd jstree ajax dddddddd ffffff
有关插件jstree的共享,一般的详细jstree更加强大。
jsTree(JQuery) 排序节点 Bug的解决方法。
jsTree中文文档
tree.jstree.jstree.jstree.jstree.jstree.jstree.jstree.jstree.js
简单JsTree结合bootstrap的代码实例,易上手应用,多选,单选,增加,删除选框等
十分漂亮的 js tree控件 同时也支持动态生成树,使用方便快捷。
JStree需要的jstree.min.js、jstree.js和样式文件
jsTree是一个 基于jQuery的Tree控件。支持XML,JSON,Html三种数据源。提供创建,重命名,移动,删除,拖"放节点操作。可以自己自定义创建,删 除,嵌套,重命名,选择节点的规则。在这些操作上可以添加多种监听事件...