在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>
- div.trigerHandle :用于expand和close
- span :存放文字,树节点图标样式
- a :提供上下左右箭头控制的焦点
效果图
代码未完成,风格也不太好,就不拿出来误导人了。
192个节点动态展开的本机测试耗时,比自己以前写的树快了不少。
IE6 :样式不支持
IE7 : 850ms
Opera 9: 240ms
firefox3:500ms
chrom:240ms