- 浏览: 340239 次
- 性别:
- 来自: 北京
最新评论
-
javabro:
求告知,ztree中自己在点onclick () 通过获取tI ...
本人从今以后不再维护这里的博客, 只在 开源中国 进行发布 -
sinoyang:
使用的时候发现与bootstrap冲突了,蛋疼死了,改哪个都不 ...
JQuery Tree插件——zTree v3.5.16 版 发布 -
clear_yang:
jquery.ztree.excheck.min.js:15 ...
JQuery Tree插件——zTree v3.5.02 版 发布 -
路人NFTS:
请教个问题,ztree 支持异步加载的扩展么? 因为跨域,IE ...
JQuery Tree插件——zTree v3.5.16 版 发布 -
kainever7:
页面初始化时,通过<iframe src=". ...
JQuery Tree插件——zTree v3.5.16 版 发布
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 图标。
评论
http://www.suchso.com/UIweb/ztree-Bootstrap-css-demo.html
http://www.suchso.com/UIweb/ztree-Bootstrap-css-demo.html
非常感谢!
http://www.suchso.com/UIweb/ztree-Bootstrap-css-demo.html
自己根据需要配置zTree 图层的样式,或 zTree 容器的样式, 让需要显示滚动条的图层显示滚动条即可。
利用自定义控件的 方式自己添加吧,但 父子关联的规则 只能你自己去制作了。
请问一下,是在那几个文件里修改呢?比如修改那些属性呢?呵呵
看 Demo 和 API 你可以知道如何添加自定义控件; 至于联动只能你自己加自己独立的代码了,因为这些控件的显示状态、数据的值,全是需要你自己控制的
谢谢了,自定义图片是弄出来,不过,不知道怎样做,点击图片的时候让它变成勾选的图片,再点击一下就变回原来没有勾选的图片
给节点添加你需要的 属性保存 勾选状态, 给图片设置 css 控制什么时候勾选,什么时候取消勾选
利用自定义控件的 方式自己添加吧,但 父子关联的规则 只能你自己去制作了。
请问一下,是在那几个文件里修改呢?比如修改那些属性呢?呵呵
看 Demo 和 API 你可以知道如何添加自定义控件; 至于联动只能你自己加自己独立的代码了,因为这些控件的显示状态、数据的值,全是需要你自己控制的
谢谢了,自定义图片是弄出来,不过,不知道怎样做,点击图片的时候让它变成勾选的图片,再点击一下就变回原来没有勾选的图片
利用自定义控件的 方式自己添加吧,但 父子关联的规则 只能你自己去制作了。
请问一下,是在那几个文件里修改呢?比如修改那些属性呢?呵呵
看 Demo 和 API 你可以知道如何添加自定义控件; 至于联动只能你自己加自己独立的代码了,因为这些控件的显示状态、数据的值,全是需要你自己控制的
利用自定义控件的 方式自己添加吧,但 父子关联的规则 只能你自己去制作了。
请问一下,是在那几个文件里修改呢?比如修改那些属性呢?呵呵
利用自定义控件的 方式自己添加吧,但 父子关联的规则 只能你自己去制作了。
var t="1";
var setting = {
async: {
enable: true,
url: "ResourceManageServlet",
autoParam:["id", "level","isP"],
otherParam:["t":t],
dataFilter:filter
}
};
如果我在异步加载前把t="2"后,这样我后台获取的t值还是1,怎么做才能实现动态传递值的效果。
或者api里面的有些方法我忽略了?
利用 beforeAsync 这个回调可以随意修改
var t="1";
var setting = {
async: {
enable: true,
url: "ResourceManageServlet",
autoParam:["id", "level","isP"],
otherParam:["t":t],
dataFilter:filter
}
};
如果我在异步加载前把t="2"后,这样我后台获取的t值还是1,怎么做才能实现动态传递值的效果。
或者api里面的有些方法我忽略了?
不好意思,自行手动添加吧
按道理不应该哟。。。难道是浏览器有问题?
.ztree li a.curSelectedNode_Edit 处于编辑模式时的样式 是指哪个呢?
当前正在编辑的节点的 <a> 标签呀 input 是在 a 内的
之后通过fontCss将drag==false的节点设置为灰色粗体,但是将节点的drag设置为true后,
不知道怎么让节点变回正常状态,即没鼠标经过没选中为正常字体,选中或鼠标经过为红色粗体。
有没有办法,使符合条件时设置成设定的样式,不符合的变回正常样式?
利用 fontCss 和 updataNode 组合吧。 看看 http://www.ztree.me/v3/demo.php#_110 这个Demo
检查你的 DOCTYPE 是否变了?
发表评论
-
JQuery Tree插件——zTree v3.5.16 版 发布
2014-03-09 20:09 32815zTree v3.5.16 发布,继续缓慢的修正 bug ... -
JQuery Tree插件——zTree v3.5.15 版 发布
2013-10-21 09:30 14033zTree v3.5.15 发布,继续 ... -
JQuery Tree插件——zTree v3.5.14 版 发布
2013-06-29 00:36 6932在 v3.5.13 中由于个人疏漏,产生了一个比较严重 ... -
JQuery Tree插件——zTree v3.5.13 版 发布
2013-06-02 21:43 6492近期由于工作繁忙,所以一直没有发布 v3.5.13 ... -
JQuery Tree插件——zTree v3.5.12 版 发布
2013-03-11 11:13 13034为了学习如何在 jQuery Plugin 发布,反 ... -
JQuery Tree插件——zTree v3.5.02 版 发布
2013-01-28 10:34 10324首先要告诉大家,在 jQuery 发布了插件注册功能 ... -
JQuery Tree插件——zTree v3.5.01 版 发布
2012-12-21 10:37 3693赶着天黑前,赶紧发布 v3.5 的补丁,修正目前 ... -
JQuery Tree插件——zTree v3.5 正式版 发布
2012-11-20 09:50 13684由于国庆之后一直忙于公司的项目,因此将 zTre ... -
JQuery Tree插件——zTree v3.4 正式版 发布
2012-09-03 10:55 7370这次 v3.4 主要还是修改一些细节 bug, ... -
JQuery Tree插件——zTree v3.3 正式版 发布
2012-07-16 12:54 8542这次 zTree v3.3 继续 ... -
简述如何制作 zTree v3.x 系列的扩展 js 库
2012-06-29 15:31 2903zTree v3.x 版本修改了结构,将原先混在 ... -
JS 代码调试经验总结(菜鸟必读)
2012-06-12 18:03 19854前言:不知不觉写了很多,希望你能耐心看完这篇文章 ... -
启用新域名—— zTree.me
2012-05-24 14:11 2065折腾一上午,终于启用 新域名 zTree.me 欢迎各 ... -
JQuery Tree插件——zTree v3.2 正式版 发布
2012-05-14 13:53 6711因最近本人工作较忙,所以 v3.2 拖了很久,还 ... -
JQuery Tree插件——zTree v3.1 正式版 发布
2012-02-14 10:22 16619选在情人节发布 zTree v3.1,希望 zT ... -
CSS Sprites 使用注意之—— 避免因浏览器放大导致的图片异常
2012-02-02 14:34 2663近日有朋友说,将浏览器放大后,会发现 zTree 出现 ... -
IE 下 css 设置透明度造成 input 内光标异常的问题
2012-02-01 14:01 4023zTree v3.0 正式版发 ... -
zTree v2.x 升级 v3.0 之 异步加载 与 添加节点的错误分析
2012-01-13 16:34 4355(补充: 计划 v3.1 中修改进行异步加载的逻辑 ... -
JQuery Tree插件——zTree v3.0 正式版 发布
2012-01-10 09:39 6266在大家的帮助 和 关注下,今天 zTree v3 ... -
国庆前,zTree 开发推迟
2011-09-19 09:20 2549大家好,由于本人工作原因,国庆前会相当忙,因此 zTr ...
相关推荐
zTree v3.5.37 API 文档 setting 配置详解 zTree 方法详解
Jquery javascript API 中文 JQuery zTree v3.5 api
主要内容:关于ztree3.5读取数据库数据转为节点显示成树,以及对节点增删改的异步操作。 特色:集成了一个挺方便也实用的弹出层插件tipsWindown,有兴趣的可以学下,调用很方便。 整合了ssh,jar包没有整理,直接...
JQuery zTree v3.5.47.zip
ztree3.5中文API文档
zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。
首先要强调的就是,制作 zTree 时... zTree 的 css 文件就是 zTreeStyle.css,其实 这里面的 css 内容并不多,熟悉 css 的应该看起来还是挺容易的。 首先要强调的就是,制作 zTree 时一定要让 ul 容器设置 classNam
收集的js工具包,实际使用无问题,欢迎下载,如不能使用,请及时联系发布者 简介:树形菜单的ztree3.5.zip
zTree,jQuery树结构插件,可以提供节点的异步加载。
JQuery zTree特点兼容IE、FireFox、Chrome等浏览器(对于IE 6的兼容问题将不做特殊维护)在一个页面内可同时生成多个Tree实例支持JSON数据支持一次性静态生成和Ajax异步加载两种方式支持多种事件响应及反馈支持Tree...
.ztree li span.button.chk.checkbox_false_full { background-position: -5px -5px; } .ztree li span.button.chk.checkbox_false_full_focus { background-position: -5px -26px; } .ztree li span.button.chk...
zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。
zTree js css img包zTree js css img包zTree js css img包zTree js css img包zTree js css img包zTree js css img包zTree js css img包zTree js css img包zTree js css img包zTree js css img包zTree js css img包...
本想0分分享的,但是下拉选项中最少是1分,没办法
zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。
ztree 3.5 中文API帮助文档
zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。专门适合项目开发,尤其是 树状菜单、树状数据的Web显示、权限管理等等。
在ztree3.5 demo中加的页面demo\cn\super\radio_checkbox.html 页面上在组合功能演示--radio_checkbox共存中可以看到效果