数据源用数组混json结构
实现了基本的功能
效率一般 跟 dhtree 梅花雪 树 对比了下 都差不多 (ps感觉比dhtree快点 跟梅花雪树差不多 个人测试 也许测试的方法是错误的 哈哈 如果是错误 请告诉我一下)
这个实现树的原理是根据json
不断的生成ul li
下面是一个简单的例子 (只有涉及到生成树 也就是说只是展示 tree类代码只有64行)
没有用innerHTML生成 全是是创建节点来创建ul li
所以创建节点碎片添加 然后再一次性添加很重要啊
确实能提高不是速度
在就是处理图片样式了
这个我参照的风之石的那个tree
结构和样式都很好 写起来很方便
所以介绍一下
最后一个节点 因为没有向下的虚线了 li就不要设置背景图了 切+那个图片也要换
这边是里加个 l
如
这个是 +样子样式
#demo .tvdash-f{
background-position: -240px -40px;
}
这个是-样式
#demo .tvdash-f-open{
background-position: -200px -40px;
}
这个就是最后一个节点的样式了
#demo .tvdash-fl{
background-position: -100px -40px;
}
png图在ie6下有点问题 所以ie6下图可能会看不见 下面那个例子用的是gif的 效果在ie6下正常
html>
http://www.w3.org/1999/xhtml">
easytree
<script>
(function(doc,undefined){
var window = this;
window.Sys = function (ua){
var b = {
ie: /msie/.test(ua) && !/opera/.test(ua),
opera: /opera/.test(ua),
safari: /webkit/.test(ua) && !/chrome/.test(ua),
firefox: /firefox/.test(ua),
chrome: /chrome/.test(ua)
},vMark = "";
for (var i in b) {
if (b[i]) { vMark = "safari" == i "version" : i; break; }
}
b.version = vMark && RegExp("( :" + vMark + ")[\/: ]([\d.]+)").test(ua) RegExp.$1 : "0";
b.ie6 = b.ie && parseInt(b.version, 10) == 6;
b.ie7 = b.ie && parseInt(b.version, 10) == 7;
b.ie8 = b.ie && parseInt(b.version, 10) == 8;
return b;
}(window.navigator.userAgent.toLowerCase());
window.Sys.ie6&&doc.execCommand("BackgroundImageCache", false, true);
window.$$ = function(Id){
return doc.getElementById(Id);
};
window.$c = function(name,parent){
var elem = doc.createElement(name);
parent&&parent.appendChild(elem);
return elem;
};
window.addListener = function(element,e,fn){
!element.events&&(element.events = {});
element.events[e]&&(element.events[e][addListener.guid++]=fn)||(element.events[e] = {0:fn});
element.addEventListener element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn);
};
window.addListener.guid = 1;
window.removeListener = function(element,e,fn){
var handlers = element.events[e],type;
if(fn){
for(type in handlers)
if(handlers[type]===fn){
element.removeEventListener element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn);
delete handlers[type];
}
}else{
for(type in handlers){
element.removeEventListener element.removeEventListener(e,handlers[type],false):element.detachEvent("on" + e,handlers[type]);
delete handlers[type];
}
}
};
window.setStyle = function(e,o){
if(typeof o=="string")
e.style.cssText=o;
else
for(var i in o)
e.s