jQuery树形菜单TreeView高性能应用(3)

确定了节点的HTML我们就可以来写CSS了。有了效果图，有个节点结构接着就编写CSS了

下面是CSS的完整代码

.ie .bbit-tree .bbit-tree-bwrap{

}
.bbit-tree ul,.bbit-tree li
{
    list-style-type:none;
    margin:0px;
    padding:0px;
}
.bbit-tree-body
{
     font-size:12px;
}
.bbit-tree-icon, .bbit-tree-ec-icon, .bbit-tree-node-cb,.bbit-tree-elbow-line, .bbit-tree-elbow, .bbit-tree-elbow-end, .bbit-tree-elbow-plus, .bbit-tree-elbow-minus, .bbit-tree-elbow-end-plus, .bbit-tree-elbow-end-minus{
    border: 0 none;
    height: 18px;
    margin: 0;
    padding: 0;
    vertical-align: top;
    width: 16px;
    background-repeat: no-repeat;
}
 .bbit-tree-node-cb
 {
     height:16px;
 }
.bbit-tree-node-collapsed .bbit-tree-node-icon, .bbit-tree-node-expanded .bbit-tree-node-icon, .bbit-tree-node-leaf .bbit-tree-node-icon{
    border: 0 none;
    height: 18px;
    margin: 0;
    padding: 0;
    vertical-align: top;
    width: 16px;
    background-position:center;
    background-repeat: no-repeat;
}

.ie .bbit-tree-node-indent img, .ie .bbit-tree-node-icon, .ie .bbit-tree-ec-icon {
    vertical-align:middle !important;
}

.bbit-tree-noicon .bbit-tree-node-icon{
    width:0; height:0;
}

/* No line styles 没有线的样式 */
.bbit-tree-no-lines .bbit-tree-elbow{
    background:transparent;
}

.bbit-tree-no-lines .bbit-tree-elbow-end{
    background:transparent;
}

.bbit-tree-no-lines .bbit-tree-elbow-line{
    background:transparent;
}

/* Arrows Vista系统树的样式只有箭头*/
.bbit-tree-arrows .bbit-tree-elbow{
    background:transparent;
}

.bbit-tree-arrows .bbit-tree-elbow-plus{
    background:transparent no-repeat 0 0;
}

.bbit-tree-arrows .bbit-tree-elbow-minus{
    background:transparent no-repeat -16px 0;
}

.bbit-tree-arrows .bbit-tree-elbow-end{
    background:transparent;
}

.bbit-tree-arrows .bbit-tree-elbow-end-plus{
    background:transparent no-repeat 0 0;
}

.bbit-tree-arrows .bbit-tree-elbow-end-minus{
    background:transparent no-repeat -16px 0;
}

.bbit-tree-arrows .bbit-tree-elbow-line{
    background:transparent;
}

.bbit-tree-arrows .bbit-tree-ec-over .bbit-tree-elbow-plus{
    background-position:-32px 0;
}

.bbit-tree-arrows .bbit-tree-ec-over .bbit-tree-elbow-minus{
    background-position:-48px 0;
}

.bbit-tree-arrows .bbit-tree-ec-over .bbit-tree-elbow-end-plus{
    background-position:-32px 0;
}

.bbit-tree-arrows .bbit-tree-ec-over .bbit-tree-elbow-end-minus{
    background-position:-48px 0;
}

.bbit-tree-elbow-plus, .bbit-tree-elbow-minus, .bbit-tree-elbow-end-plus, .bbit-tree-elbow-end-minus{
    cursor:pointer;
}

.ie ul.bbit-tree-node-ct{
    font-size:0;
    line-height:0;
    zoom:1;
}

.bbit-tree-node{
    white-space: nowrap;
}

.bbit-tree-node-el {
    line-height:18px;
    cursor:default;
   /* cursor:pointer;*/
}

.bbit-tree-node a{
    text-decoration:none;
    -khtml-user-select:none;
    -moz-user-select:none;
    -webkit-user-select:ignore;
    -kthml-user-focus:normal;
    -moz-user-focus:normal;
    -moz-outline: 0 none;
    outline:0 none;
}

.bbit-tree-node a span{
    text-decoration:none;
    padding:1px 3px 1px 2px;
}

.bbit-tree-node .bbit-tree-node-disabled .bbit-tree-node-icon{
   -moz-opacity: 0.5;
   opacity:.5;
   filter: alpha(opacity=50);
}

.bbit-tree-node .bbit-tree-node-inline-icon{
    background:transparent;
}

.bbit-tree-node a:hover{
    text-decoration:none;
}



/* Fix for ie rootVisible:false issue，修正一个IEdebug */
.bbit-tree-root {
    zoom:1;
}


/***********这里是图标了，可以在这里替换哦*****************/
.bbit-tree-node-expanded .bbit-tree-node-icon{
    background-image:url(images/tree/folder-open.gif);
}

.bbit-tree-node-leaf .bbit-tree-node-icon{
    background-image:url(images/tree/leaf.gif);
}

.bbit-tree-node-collapsed .bbit-tree-node-icon{
    background-image:url(images/tree/folder.gif);
}

.bbit-tree-node-loading .bbit-tree-node-icon{
    background-image:url(images/tree/loading.gif) !important;
}

.bbit-tree-node .bbit-tree-node-inline-icon {
    background-image: none;
}

.bbit-tree-node-loading a span{
     font-style: italic;
     color:#444444;
}

.bbit-tree-lines .bbit-tree-elbow{
    background-image:url(images/tree/elbow.gif);
}

.bbit-tree-lines .bbit-tree-elbow-plus{
    background-image:url(images/tree/elbow-plus.gif);
}

.bbit-tree-lines .bbit-tree-elbow-minus{
    background-image:url(images/tree/elbow-minus.gif);
}

.bbit-tree-lines .bbit-tree-elbow-end{
    background-image:url(images/tree/elbow-end.gif);
}

.bbit-tree-lines .bbit-tree-elbow-end-plus{
    background-image:url(images/tree/elbow-end-plus.gif);
}

.bbit-tree-lines .bbit-tree-elbow-end-minus{
    background-image:url(images/tree/elbow-end-minus.gif);
}

.bbit-tree-lines .bbit-tree-elbow-line{
    background-image:url(images/tree/elbow-line.gif);
}

.bbit-tree-no-lines .bbit-tree-elbow-plus{
    background-image:url(images/tree/elbow-plus-nl.gif);
}

.bbit-tree-no-lines .bbit-tree-elbow-minus{
    background-image:url(images/tree/elbow-minus-nl.gif);
}

.bbit-tree-no-lines .bbit-tree-elbow-end-plus{
    background-image:url(images/tree/elbow-end-plus-nl.gif);
}

.bbit-tree-no-lines .bbit-tree-elbow-end-minus{
    background-image:url(images/tree/elbow-end-minus-nl.gif);
}

.bbit-tree-arrows .bbit-tree-elbow-plus{
    background-image:url(images/tree/arrows.gif);
}

.bbit-tree-arrows .bbit-tree-elbow-minus{
    background-image:url(images/tree/arrows.gif);
}

.bbit-tree-arrows .bbit-tree-elbow-end-plus{
    background-image:url(images/tree/arrows.gif);
}

.bbit-tree-arrows .bbit-tree-elbow-end-minus{
    background-image:url(images/tree/arrows.gif);
}

/*TreeNode 选中的Disabled的一些颜色，字体样式*/
.bbit-tree-node{
    color:#000;
    font: normal 11px arial, tahoma, helvetica, sans-serif;
}

.bbit-tree-node a{
    color:#000;
}
.bbit-tree-node a span{
    color:#000;
}
.bbit-tree-node .bbit-tree-node-disabled a span{
    color:gray !important;
}
.bbit-tree-node .bbit-tree-node-over {
    background-color: #eee;
}

.bbit-tree-node .bbit-tree-selected {
    background-color: #d9e8fb;
}