树使用css选择器优化代码（IE7+，firefox3，opera9，chrom下可用）

    在IE6 下，不支持 .parent > .children 的css选择器语法，所以基于IE6的树组件中一般都是单独使用img元素或者背景来显示树的图标。

    在IE7 和其他的主流浏览器中，已经支持了以上的css选择器语法，这样我们就可以采用在span中用padding-left和span的背景图片的方案来解决树图标（展开、关闭、叶子、复选框等）的显示。

    css 示例样式

   

.youi-tree li.treeNode >span{cursor: pointer;padding:1px 0px 0px 18px;-padding-top:2px;background: url(images/tree/leaf.gif) 0 0px no-repeat;line-height:16px;vertical-align:bottom;}
.youi-tree li.treeNode.root >span{background-image:url(images/tree/root.gif);}
.youi-tree li.treeNode.collapsable >span{background-image: url(images/tree/folder-open.gif);}
.youi-tree li.treeNode.expandable >span{background-image: url(images/tree/folder.gif);}
.youi-tree li.treeNode.selected >span a{color:red;}
.youi-tree li.treeNode.checked >span{background-image: url(images/tree/btn_check_checked.png);}
.youi-tree li.treeNode.partchecked >span{background-image: url(images/tree/btn_check_checked_part.png);}
.youi-tree li.treeNode.unchecked >span{background-image: url(images/tree/btn_check.png);}
.youi-tree li.treeNode.loading >span{background-image: url(images/tree/loading.gif);}

 
   树最终有效的html

<li class="treeNode unchecked" title="查找0">
    <div class="triggerHandle"/>
    <span><a href="#">查找0</a></span>
</li>

1. div.trigerHandle  ：用于expand和close
2. span                   ：存放文字，树节点图标样式
3. a                         ：提供上下左右箭头控制的焦点

    效果图

 

代码未完成，风格也不太好，就不拿出来误导人了。

 

 192个节点动态展开的本机测试耗时，比自己以前写的树快了不少。

 IE6 :样式不支持

 IE7 : 850ms

 Opera 9: 240ms

 firefox3:500ms

 chrom:240ms