博客专区 > zTree的博客 > 博客详情
zTree v3.5 Css 详解
zTree 发表于5年前
zTree v3.5 Css 详解
  • 发表于 5年前
  • 阅读 16887
  • 收藏 97
  • 点赞 11
  • 评论 30

330元/年抢阿里云香港云服务器,节省80%出海成本>>>   

    马上要开始研究新版本的 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.gif")}
    以上部分是 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 图标。

标签: zTree css
共有 人打赏支持
zTree
粉丝 719
博文 20
码字总数 21646
作品 1
评论 (30)
IceRainYWC
嗯,说的很细,学习了。
Zuo_W
恩,考虑把项目中的jstree换成ztree
码农与厨子
谢谢楼主文章。很详细
Chiroc
坐等新版本……
嫂来哇
激动中
zTree

引用来自“徐迎龙”的评论

激动中

why? :)
嫂来哇

引用来自“zTree”的评论

引用来自“徐迎龙”的评论

激动中

why? :)

奉献的精神,和坚持不懈,在中国
zTree

引用来自“徐迎龙”的评论

引用来自“zTree”的评论

引用来自“徐迎龙”的评论

激动中

why? :)

奉献的精神,和坚持不懈,在中国

0 过奖了! 其实看看现在这么多开源项目,应该说我这样的人还是挺多的嘛...
嫂来哇

引用来自“zTree”的评论

引用来自“徐迎龙”的评论

引用来自“zTree”的评论

引用来自“徐迎龙”的评论

激动中

why? :)

奉献的精神,和坚持不懈,在中国

0 过奖了! 其实看看现在这么多开源项目,应该说我这样的人还是挺多的嘛...

继续加油,先顶一下
郑柯
关注中
zeq_jone
您好:我用了zTree,但是在IE7下显示不正常。
zeq_jone
不好意思,这里不能插入图片以显示具体问题。我是将zTree放在一个弹出层里面的,异步加载数据到这个zTree里。在IE8下及更高版本的IE,FF等主流浏览器可以正常显示。
zTree

引用来自“zeq_jone”的评论

不好意思,这里不能插入图片以显示具体问题。我是将zTree放在一个弹出层里面的,异步加载数据到这个zTree里。在IE8下及更高版本的IE,FF等主流浏览器可以正常显示。

请给我发邮件吧, 今天太忙没工夫细看
zeq_jone
现在问题找到了。这个*background-image属性设置错了。已经改好了。谢谢您对我的问题的回复!
zeq_jone
我有一个建议:能不能把zTree中注册的事件在zTree那一层停止事件冒泡,这样是不是更具有封闭性。比如我把zTree放在一个div里面,如果我想给div绑定onmouseover事件,zTree内部每个节点的onmouseover事件就会与div事件冲突,导致在IE(在firefox中不是很明显,但是有这种效果)中当鼠标放在zTree元素上时,会导致一闪一闪的,非常的不舒服。当然,这个问题我自己处理了。但是我想如果这个问题在zTree内部做处理的话,从整体执行效率上会高一点儿。
zTree

引用来自“zeq_jone”的评论

我有一个建议:能不能把zTree中注册的事件在zTree那一层停止事件冒泡,这样是不是更具有封闭性。比如我把zTree放在一个div里面,如果我想给div绑定onmouseover事件,zTree内部每个节点的onmouseover事件就会与div事件冲突,导致在IE(在firefox中不是很明显,但是有这种效果)中当鼠标放在zTree元素上时,会导致一闪一闪的,非常的不舒服。当然,这个问题我自己处理了。但是我想如果这个问题在zTree内部做处理的话,从整体执行效率上会高一点儿。

不好意思,我不能这么做,原因如下:
1. 这种做法过于野蛮,如果其他页面有对 document 的类似操作都会被 ztree 阻止。
2. 对于 onmouseover 和 onmouseout 事件来说, 当你div 中有很多其它 dom 的时候,是肯定会出发若干 这两个事件的,你可以看看, 所以 对于 jQuery 来说才会设计出一个 hover 事件。你可以在网上搜索一下相关内容,并且自己做做测试。

综上所述,你发现的问题主要源于你对于 onmouseover 事件的处理方式。
黄晓松
移动后有个事件onDrop
可是移动失败也执行
不知道有没有移动成功才执行的事件
黄晓松
移动后有个事件onDrop
可是移动失败也执行
不知道有没有移动成功才执行的事件
zTree

引用来自“黄晓松”的评论

移动后有个事件onDrop
可是移动失败也执行
不知道有没有移动成功才执行的事件

不仔细看 API!!!
wuxin110
ztree这样设计(css+html)结构有问题,span内联元素,问题主要出在下面的样式上
.ztree li span.button {line-height:0; margin:0; width:16px; height:16px; display: inline-block; vertical-align:middle;
2   border:0 none; cursor: pointer;outline:none;
3   background-color:transparent; background-repeat:no-repeat; background-attachment: scroll;
4   background-image:url("./img/zTreeStandard.png"); *background-image:url("./img/zTreeStandard.gif")}
问题描述:
当ztree目录树滚动条无法通过overflow:auto控制溢出(firefox、ie6)没有通过测试。
×
zTree
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: