zTreeStyle.css

zTree

zTreeStyle.css

目录: [参数说明] --> [skin 皮肤说明]概述

zTree的样式设置,如果想自定义皮肤,请根据以下简要说明,设计个性化的图标以及css样式

请注意对于 Tree 的容器样式不属于 zTree 内部考虑,因此其样式也设置在 demo.css 文件中,对于 class="tree" 中 tree 这个名称,可以根据需要随意修改,别忘了修改对应的css就是了。

简要说明

zTree总体样式设定
.tree{...}
zTree内部li的总体样式设定(zTree采用ul li的结构显示Tree)
.tree li{...}
zTree内部li内的ul的总体样式设定
.tree li ul{...}
zTree内部节点间连线样式设定
.tree li ul.line{...}
zTree内节点超级链接的样式设定
.tree li a{...}
.tree li a:hover{...}
zTree内节点被选择时的样式设定
.tree li a.curSelectedNode{...}
zTree内节点被选择后,处于编辑状态时的样式设定
.tree li a.curSelectedNode_Edit{...}
zTree内节点成为正被拖拽目标的父节点时的样式设定
.tree li a.tmpTargetNode{...}
zTree内节点编辑name时输入框的样式设定
.tree li a input.rename{...}
zTree内部展开折叠图标以及节点个性化图标的总体样式设定
.tree li button{...}
zTree内部个性化图标的总体样式设定
.tree li button.ico{...}
zTree内部编辑按钮样式设定
.tree li button.edit{...}
zTree内部删除按钮样式设定
.tree li button.del{...}
zTree内部 checkbox & radio 图标样式设定
.tree li button.chk{...}
.tree li button.chk.checkbox_false_full{...}	
.tree li button.chk.checkbox_false_full_focus{...}	
.tree li button.chk.checkbox_false_part{...}	
.tree li button.chk.checkbox_false_part_focus{...}	
.tree li button.chk.checkbox_true_full{...}	
.tree li button.chk.checkbox_true_full_focus{...}	
.tree li button.chk.checkbox_true_part{...}	
.tree li button.chk.checkbox_true_part_focus{...}	

.tree li button.chk.radio_false_full{...}	
.tree li button.chk.radio_false_full_focus{...}	
.tree li button.chk.radio_false_part{...}	
.tree li button.chk.radio_false_part_focus{...}	
.tree li button.chk.radio_true_full{...}	
.tree li button.chk.radio_true_full_focus{...}	
.tree li button.chk.radio_true_part{...}	
.tree li button.chk.radio_true_part_focus{...}
zTree内部父节点展开折叠图标样式设定
.tree li button.switch_root_open{...}
.tree li button.switch_root_close{...}
.tree li button.switch_roots_open{...}
.tree li button.switch_roots_close{...}
.tree li button.switch_center_open{...}
.tree li button.switch_center_close{...}
.tree li button.switch_bottom_open{...}
.tree li button.switch_bottom_close{...}
.tree li button.switch_noLine_open{...}
.tree li button.switch_noLine_close{...}
zTree内部叶子节点连线图标样式设定
.tree li button.switch_root_docu{...}
.tree li button.switch_roots_docu{...}
.tree li button.switch_center_docu{...}
.tree li button.switch_bottom_docu{...}
.tree li button.switch_noLine_docu{...}
zTree内部个性化节点图标样式设定
.tree li button.ico_loading{...} //loading 图标,v2.2 增加
.tree li button.ico_open{...}
.tree li button.ico_close{...}
.tree li button.ico_docu{...}
zTree内部 CheckBox 输入框样式设定
.tree INPUT.checkbox{...}
zTree的根成为拖拽的目的地时样式设定
.tmpTargetTree{...}
zTree节点拖拽时指示目标的箭头图标样式设定
button.tmpzTreeMove_arrow{...} //拖拽移动节点时的位置图标,v2.2 增加
zTree的节点拖拽图层样式设定
.zTreeDragUL{...}
zTree的iframe遮罩样式设定(iFrame遮罩能有效避免页面上的iframe导致拖拽停滞的影响)
.zTreeMask{...}