wztree.css

javascript实现的节点树,无限分级 还带有详细的使用说明,

/*attention: pls don't change class name*/
.btns {position:absolute;left:50px;top:30px;width:100px;height:480px;border:1px solid #fc0;text-align:center;}
.btns button {outline:none;cursor:pointer;margin:2px;width:80px;height:18px;border:1px solid blue;font:normal bold 12px 宋体;}
.btns .h10 {width:100%;height:10px;font-size:1px;clear:both;}
.btns .ln {width:100%;font-size:1px;clear:both;border-top:1px solid #fc0;margin:5px 0 9px 0;}

.pane {position:absolute;display:none;border:1px solid #fc0;left:500px;top:30px;width:300px;height:480px;}
.pane * {padding:0;margin:0;border:0;font-size:12px;}
.pane .h10 {width:100%;height:10px;font-size:1px;clear:both;}
.pane .ln {width:100%;font-size:1px;clear:both;border-top:1px solid #fc0;margin:5px 0 9px 0;}

.pane span {cursor:pointer;line-height:150%;margin:0 2px;}
.pane .has {clear:both;width:100%;}
.pane .cls {clear:both;width:100%;display:none;}
.pane .row {height:16px;width:100%;overflow:hidden;line-height:16px;}

/*目录展开*/
.pane .fo {float:left;width:16px;height:100%;background:transparent url(bg/folder-open.gif) no-repeat;}
/*目录合并*/
.pane .fc {float:left;width:16px;height:100%;background:transparent url(bg/folder.gif) no-repeat;}
/*空格*/
.pane .grid {float:left;width:16px;height:100%;background:transparent url(bg/s.gif) no-repeat;}
/*竖线*/
.pane .grdv {float:left;width:16px;height:100%;background:transparent url(bg/elbow-line.gif) no-repeat;}
/*叶子*/
.pane .leaf {float:left;width:16px;height:100%;background:transparent url(bg/leaf.gif) no-repeat;}
/*分支.合并:有子结点*/
.pane .g1 {float:left;width:16px;height:100%;cursor:pointer;background:transparent url(bg/elbow-plus-nl.gif) no-repeat;}
/*分支.展开:有子结点*/
.pane .g2 {float:left;width:16px;height:100%;cursor:pointer;background:transparent url(bg/elbow-minus-nl.gif) no-repeat;}
/*分支:结点无子结点*/
.pane .g3 {float:left;width:16px;height:100%;background:transparent url(bg/elbow-end.gif) no-repeat;}
/*分支.合并:结点有子结点-无同级结点*/
.pane .g4 {float:left;width:16px;height:100%;cursor:pointer;background:transparent url(bg/elbow-end-plus.gif) no-repeat;}
/*分支.展开:结点有子结点-无同级结点*/
.pane .g5 {float:left;width:16px;height:100%;cursor:pointer;background:transparent url(bg/elbow-end-minus.gif) no-repeat;}
/*分支.合并:结点有子结点-有同级结点[中间]*/
.pane .g6 {float:left;width:16px;height:100%;cursor:pointer;background:transparent url(bg/elbow-end-minus.gif) no-repeat;}
/*分支.展开:结点有子结点-有同级结点[中间]*/
.pane .g7 {float:left;width:16px;height:100%;cursor:pointer;background:transparent url(bg/elbow-minus.gif) no-repeat;}
/*分支.合并:结点有子结点-有同级结点[结尾]*/
.pane .g8 {float:left;width:16px;height:100%;cursor:pointer;background:transparent url(bg/elbow-plus.gif) no-repeat;}
/*分支.合并:结点有子结点-有同级结点[结尾]*/
.pane .gt {float:left;width:16px;height:100%;background:transparent url(bg/elbow.gif) no-repeat;}