今天小编跟大家讲解下有关zTree v3.5 Css分解与dom结构说明 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关zTree v3.5 Css分解与dom结构说明 的相关资料，希望小伙伴们看了有所帮助。
首先要强调的就是 制作 zTree 时一定要让 ul 容器设置 className：ztree； 这个主要就是为了避免与页面上自定义的css 或者其他插件的css 冲突 马上要开始研究新版本的 zTree 结构了 所以要先把现在的情况再多分析一下 做了 v3.x 版本后也一直没有制作 css 的文档 特在此进行整理一下 一边讲结构 一边说说小技巧 希望能给大家一些帮助。 zTree 的 css 文件就是 zTreeStyle.css 其实 这里面的 css 内容并不多 熟悉 css 的应该看起来还是挺容易的。 首先要强调的就是 制作 zTree 时一定要让 ul 容器设置 className：ztree； 这个主要就是为了避免与页面上自定义的css 或者其他插件的css 冲突；但 css 内容太多了 我不可能为了100%的避免冲突 就在 css 内把所有的 css 属性都设置一遍 如果这么做的话这个 css 就太臃肿了 基本上我我对常用的这几个属性进行了重新设定。 所以 如果当你使用 zTree 时出现了样式异常的话 就请用调试工具找到冲突的原因 然后将适用于 zTree 的属性补充到 zTree 的 css 内即可。 同时 因为 zTree 的 css 都有 .ztree 做约束 所以一般情况下 zTree 的样式是不会引起页面上其他内容样式异常的。 了解 css 之前先看看 zTree 的 DOM 结构吧： zTree 的结构就是 ul 里面包着 li li 里面 再包着 ul ......每一个节点都以一个 li 为主 它的子节点的 DOM 都存在于这个 li 里面的 ul 内 每个节点 li 的 id 就是这个节点的 tId 值 父节点的 +/- 号就是 li 内的第一个 span id 是 tId + _switch 节点的名称是 a 标签 id 是 tId + _a 节点的图标在 a 标签内 id 是 tId + _ico 节点的名称文字在 a标签内 id 是 tId + _span 子节点容器 是 ul id 是 tId + _ul 节点的 li、a、ul 都带有 level 的 class 这样你可以专门针对不同等级 level 设置自定义的样式 下面开始解析css 吧： 复制代码代码如下: .ztree * {padding:0; margin:0; font-size:12px; font-family: Verdana, Arial, Helvetica, AppleGothic, sans-serif} .ztree {margin:0; padding:5px; color:#333} .ztree li{padding:0; margin:0; list-style:none; line-height:14px; text-align:left; white-space:nowrap; outline:0} .ztree li ul{ margin:0; padding:0 0 0 18px} .ztree li ul.line{ background:url(./img/line_conn.gif) 0 0 repeat-y;} 以上部分是 zTree 的总体样式 看一眼就知道 真么啥好说的了.... 复制代码代码如下: .ztree li a {padding:1px 3px 0 0; margin:0; cursor:pointer; height:17px; color:#333; background-color: transparent; text-decoration:none; vertical-align:top; display: inline-block} .ztree li a:hover {text-decoration:underline} 以上部分是 zTree 节点显示名称的 a 标签基本样式 复制代码代码如下: .ztree li a.curSelectedNode {padding-top:0px; background-color:#FFE6B0; color:black; height:16px; border:1px #FFB951 solid; opacity:0.8;} .ztree li a.curSelectedNode_Edit {padding-top:0px; background-color:#FFE6B0; color:black; height:16px; border:1px #FFB951 solid; opacity:0.8;} 以上部分是 zTree 节点当前被选中时的样式 有 Edit 的是处于编辑模式时的样式 复制代码代码如下: .ztree li a.tmpTargetNode_inner {padding-top:0px; background-color:#316AC5; color:white; height:16px; border:1px #316AC5 solid; opacity:0.8; filter:alpha(opacity=80)} .ztree li a.tmpTargetNode_prev {} .ztree li a.tmpTargetNode_next {} 以上部分是 zTree 节点拖拽时 目标节点根据 inner 、prev、next 不同状态时的样式 复制代码代码如下: .ztree li a input.rename {height:14px; width:80px; padding:0; margin:0; font-size:12px; border:1px #7EC4CC solid; *border:0px} 以上部分是 zTree 节点编辑名称时的 input 的样式 复制代码代码如下: .ztree li span {line-height:16px; margin-right:2px} 以上部分是 zTree 节点内 span 的基础样式 复制代码代码如下: .ztree li span.button {line-height:0; margin:0; width:16px; height:16px; display: inline-block; vertical-align:middle; border:0 none; cursor: pointer;outline:none; background-color:transparent; background-repeat:no-repeat; background-attachment: scroll; background-image:url("./img/zTreeStandard.png"); *background-image:url("./img/zTreeStandard.gif")} 以上部分是 zTree 节点 +/- 号、checkbox、radio、图标 的基础样式 复制代码代码如下: .ztree li span.button.chk {width:13px; height:13px; margin:0 3px 0 0; cursor: auto} .ztree li span.button.chk.checkbox_false_full {background-position:0 0} .ztree li span.button.chk.checkbox_false_full_focus {background-position:0 -14px} .ztree li span.button.chk.checkbox_false_part {background-position:0 -28px} .ztree li span.button.chk.checkbox_false_part_focus {background-position:0 -42px} .ztree li span.button.chk.checkbox_false_disable {background-position:0 -56px} .ztree li span.button.chk.checkbox_true_full {background-position:-14px 0} .ztree li span.button.chk.checkbox_true_full_focus {background-position:-14px -14px} .ztree li span.button.chk.checkbox_true_part {background-position:-14px -28px} .ztree li span.button.chk.checkbox_true_part_focus {background-position:-14px -42px} .ztree li span.button.chk.checkbox_true_disable {background-position:-14px -56px} .ztree li span.button.chk.radio_false_full {background-position:-28px 0} .ztree li span.button.chk.radio_false_full_focus {background-position:-28px -14px} .ztree li span.button.chk.radio_false_part {background-position:-28px -28px} .ztree li span.button.chk.radio_false_part_focus {background-position:-28px -42px} .ztree li span.button.chk.radio_false_disable {background-position:-28px -56px} .ztree li span.button.chk.radio_true_full {background-position:-42px 0} .ztree li span.button.chk.radio_true_full_focus {background-position:-42px -14px} .ztree li span.button.chk.radio_true_part {background-position:-42px -28px} .ztree li span.button.chk.radio_true_part_focus {background-position:-42px -42px} .ztree li span.button.chk.radio_true_disable {background-position:-42px -56px} 以上部分是 checkbox、radio 所有状态时的样式。 提醒：有不少朋友希望使用 checkbox 但还需要单选功能 你只需要修改一下这部分的 css 让 radio 的图标都换成对应的 checkbox 的图标 同时使用 zTree 时设置为 radio 模式就可以了！ 复制代码代码如下: .ztree li span.button.switch {width:18px; height:18px} .ztree li span.button.root_open{background-position:-92px -54px} .ztree li span.button.root_close{background-position:-74px -54px} .ztree li span.button.roots_open{background-position:-92px 0} .ztree li span.button.roots_close{background-position:-74px 0} .ztree li span.button.center_open{background-position:-92px -18px} .ztree li span.button.center_close{background-position:-74px -18px} .ztree li span.button.bottom_open{background-position:-92px -36px} .ztree li span.button.bottom_close{background-position:-74px -36px} .ztree li span.button.noline_open{background-position:-92px -72px} .ztree li span.button.noline_close{background-position:-74px -72px} .ztree li span.button.root_docu{ background:none;} .ztree li span.button.roots_docu{background-position:-56px 0} .ztree li span.button.center_docu{background-position:-56px -18px} .ztree li span.button.bottom_docu{background-position:-56px -36px} .ztree li span.button.noline_docu{ background:none;} 以上部分是 zTree 节点的 +/- 号部分的样式 复制代码代码如下: .ztree li span.button.ico_open{margin-right:2px; background-position:-110px -16px; vertical-align:top; *vertical-align:middle} .ztree li span.button.ico_close{margin-right:2px; background-position:-110px 0; vertical-align:top; *vertical-align:middle} .ztree li span.button.ico_docu{margin-right:2px; background-position:-110px -32px; vertical-align:top; *vertical-align:middle} 以上部分是 zTree 节点默认图标的样式 复制代码代码如下: .ztree li span.button.edit {margin-right:2px; background-position:-110px -48px; vertical-align:top; *vertical-align:middle} .ztree li span.button.remove {margin-right:2px; background-position:-110px -64px; vertical-align:top; *vertical-align:middle} 以上部分是 zTree 节点默认的编辑、删除按钮的样式 复制代码代码如下: .ztree li span.button.ico_loading{margin-right:2px; background:url(./img/loading.gif) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle} 以上部分是 zTree 节点异步加载时 loading 图标的样式 复制代码代码如下: ul.tmpTargetzTree {background-color:#FFE6B0; opacity:0.8; filter:alpha(opacity=80)} 以上部分是 zTree 拖拽节点成为 根节点时 zTree 的临时样式 复制代码代码如下: span.tmpzTreeMove_arrow {width:16px; height:16px; display: inline-block; padding:0; margin:2px 0 0 1px; border:0 none; position:absolute; background-color:transparent; background-repeat:no-repeat; background-attachment: scroll; background-position:-110px -80px; background-image:url("./img/zTreeStandard.png"); *background-image:url("./img/zTreeStandard 以上部分是 zTree 拖拽节点时临时箭头的样式 复制代码代码如下: ul.ztree.zTreeDragUL {margin:0; padding:0; position:absolute; width:auto; height:auto;overflow:hidden; background-color:#cfcfcf; border:1px #00B83F dotted; opacity:0.8; filter:alpha(opacity=80)} 以上部分是 zTree 拖拽节点时 跟随鼠标移动的临时节点的样式 复制代码代码如下: .zTreeMask {z-index:10000; background-color:#cfcfcf; opacity:0.0; filter:alpha(opacity=0); position:absolute} 以上部分是 zTree 拖拽节点时 页面上其他 iframe 的遮罩图层的样式 补充：对于想放大字体、放大图标的朋友 很抱歉 关键问题是本人美工设计能力太差 另外时间有限 所以对于 v3 版本并没有制作其他样式模板 不过看了以上介绍后 是不是觉得调整起来其实还是很简单的 大家只需要注意一下 height 的值 包括这些 height 之间的差值 注意到这些细节 然后去调整就可以了 最后别忘了更换你的大图标的img 图标。来源：爱蒂网
