zTree简单暴力修改图标样式

最新推荐文章于 2023-04-13 16:49:25 发布
最新推荐文章于 2023-04-13 16:49:25 发布
阅读量4k 收藏 1
点赞数
文章标签： zTree zTreecss jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40800602/article/details/100801635
版权

我们打开ztree的文件夹，发现它使用的是精灵图片，所以我们可以通过更改精灵图片的内容来达到修改图标的方式在这里插入图片描述
我直接在网上找了三个图标
在这里插入图片描述在这里插入图片描述在这里插入图片描述

然后用ps覆盖原来的精灵图zTreeStandard.png
在这里插入图片描述
再新建MyzTree.css 并应用新的图片
在这里插入图片描述

.ztree li span.button {
    background-image: url("images/zTreeStandard.png") !important;
}

在这里插入图片描述
不过它还有个zTreeStandard.gif文件，不知道怎么用，并且应用了新的图片后，必须得使用虚线，否则会出现方框，加载的动图(使用了异步加载子节点的话)也会变成一个方框，可能需要再手动写一遍加载的样式在这里插入图片描述

HetFrame
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ztree 修改样式_jQuery zTree如何改变指定节点文本样式
weixin_39822147的博客
12-28 1154
需求：打开页面后已经生成一棵带有节点的树，需要实时更新该树每个节点的状态，根据状态，改变节点的ICON和FONT样式。说明：找了一下，基本上都是说加载时指定颜色的，加载时指定颜色的用法，在官方示例中就有说明：示例：显示自定义字体的树示例：自定义图标 -- icon 属性可以看到每个NODE都有一个FONT的属性，和NAME同等级。可以通过设置FONT来指定其文本样式。通过第二个示例可以看到，还有一...
漂亮的ztree样式主题
03-29
非常好看的ztree样式，可以使用不同图标，可以兼容IE6，Hunter's Home zTree in Google zTree 功能演示 基本功能演示 不兼容 IE6 兼容 IE6 check 演示 CheckBox演示 Radio演示 异步加载演示 事件演示 编辑演示 默认编辑 编辑 & 异步加载 共存 JS操作 大数据量演示 普通加载 高级异步加载 高级应用演示 两棵树的数据交换 添加自定义控件 checkbox & radio 共存 右键菜单 下拉菜单 皮肤演示
【ztree系列——图标的修改】Bootstrap风格的ztree
热门推荐
Cherie
01-04 7万+
前段时间项目中需要用树形结构，在选取的时候参考了很多插件，经过很多尝试，最后又回归到了ztree上。我以前用的界面框架是EasyUI，但是它的树结构在实现起来有点复杂，并且功能不是特别完善。dtree在做demo的时候没什么问题，但是放到项目中，从数据库读取数据后还需要进行转换……码了n个demo后，还是觉得ztree最好用！ 1.ztree图标        ztree功能强大，使用方便是一
zTree修改样式（例如修改字体大小，和各种图标）
CHL博客
06-06 3万+
找到zTree_v3/css/ zTreeStyle/zTreeStyle.css文件找到ztree*｛｝在里面修改样式需要修改其他，找到相应css修改即可
jquery——zTree, 完美好用的树插件
shmilylzy0815的专栏
10-13 1117
>   html>   head>       title>ZTREE DEMO - Standard Data title>       meta http-equiv="content-type" content="text/html; charset=UTF-8">       link href="css/zTreeStyle/zTreeStyle.css" rel="style
ZTree修改最前面的加减号、图标及大小、字体及大小、以及间距
qzyw525942的博客
04-20 4928
效果如下，最前面的加减号、图标及大小、字体及大小、以及间距都可以更改： 具体如下： 1、首先，把Ztree官方给的Demo中的如下红框中的样式文件复制到自己项目的css目录中： 其中蓝色部分是我自己添加的自定义图标。 2、新建Ztree.html如下：[其中MUI部分可以不用管，与ZTree无关] <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - noLine </T..
zTree自定义状态图标实现
10-17
本文将深入探讨如何利用zTree的自定义属性功能，来满足项目中对于Tree数据分层显示的独特需求，并展示如何实现自定义状态图标。 首先，zTree的核心优势在于其灵活性和可扩展性，这使得开发者可以方便地定制树节点的...
ztree_ztree修改版_
10-01
《zTree修改版：构建灵活的数据树结构》 在IT领域，数据的组织和呈现方式至关重要，尤其是在处理具有层级关系的数据时。zTree是一款广泛应用于Web开发中的JavaScript库，专门用于构建树状结构，如地区、组织架构或...
zTree实现节点修改的实时刷新功能
08-31
zTree实现节点修改的实时刷新功能 zTree是一个功能强大且灵活的JavaScript树插件，能够满足各种树形结构的需求。在实际应用中，经常会遇到动态操作树各节点的需求，例如增加、删除、修改节点等。因此，zTree实现...
ztree_bootstrap样式风格
04-08
2. **自定义样式**：`ZTree`默认的样式可能与`Bootstrap`的样式冲突，你需要根据`使用说明`来调整`ZTree`的CSS，使其与`Bootstrap`的样式保持一致。例如，修改节点的背景色、边框、字体等。 3. **HTML结构**：`...
关于react中使用ztree的样式优化，ztree样式风格antd化
Chris__wang的博客
01-07 4226
上一次说过react中使用ztree【https://blog.csdn.net/Chris__wang/article/details/86001063】 并且由于ztree的样式和antd出入比较大，所以对ztree样式进行了修改，使其跟antd更为接近【https://blog.csdn.net/Chris__wang/article/details/86005445】 由于上面方法是修...
vue使用ztree增加删除，修改和添加等的页面样式
q1054007919的博客
05-08 675
<template> <div> <ul id="tree" class="ztree customZTreeStyle"></ul> <h3 class="iconfont dzyjwodekanjia">icon</h3> </div> </template> <script> import $ from '../../../utils/jque.
zTree样式的修改，子父节点鼠标悬浮式的样式
mi333ni的专栏
11-05 6992
var ln=treeNodes.length;  var tempNum=1;  for(var i=0;i   var _node=treeNodes[i];      if(_node.pId=="0"){ //给最外层节点绑定鼠标悬浮时的样式    $("#"+obj.setting.treeId+"_"+tempNum+"_a").bind("mouseover",func
Ztree树状的处理
lxyforever5的博客
04-13 557
2.3.1 addDiyDom视图展示 的自定义内容（在获取数据的后调用的初始化的时候会作为参数， 上面有出现）1.用一个div进行包裹ztree结构，引用相关的js代码和css样式，这里用的样式是awesome.css。所引用的js文件，css文件可以在网上下载（这里所用到的jquery-ztree文件放在网盘了）2.1 在对页面进行初始化操作的时候会进行获取数据，对获取数据后进行处理初始化树状。ztree还有很多的其他的功能处理，我这边有的还没用上，后续若用上了会进行补充。
重置ztree样式
dexia7362的博客
01-24 232
// ztree样式； /* 新的文档目录 */ .doc-tree li span.button.ico_open { background: url("../../images/small.png") no-repeat scroll -268px -99px transparent; width: 15px; vertical-align:top; *verti...
【ztree系列】右键菜单、节点伸缩
Cherie
01-09 2万+
在网页设计中，一般很少使用右键功能，当我们未定义右键操作的时候，默认的都是调用浏览器事件。但是在有些情况下，例如为了节省页面空间（让页面更简洁、美观）或者是用户不常用的一些功能，我们就可以把它们都放在右键菜单里边了。下面以tree节点伸缩为例，来聊聊我们的右键菜单。 一、简述         右键菜单的功能是这样来的，首先设计一个菜单，用于右击显示；菜单上放置一些元素（控件），以供我们选择；然
vue ---ztree 修改ztree的图标
m0_60522381的博客
09-14 2239
由于数据量大简单的iview的tree或是el的tree加载数据造成页面卡顿，前端操作不流畅。 基于vue-giant-ztree修改，添加类似图标⬇️ 获取icon代码方法--------借鉴大佬的经验拿到了自己项目所需的图标 在ztree引用只需如下几个文件 ztree对应的vue文件 <template> <div id="z-tree" class="flex-col"> <div class="wrap flex-1"&..
【zTree】修改节点图标
暂七师师长常乃超
07-05 2万+
【需求】                                                                如图所示：在一个页面里，左右两棵树，要求右侧的树正常用“文件夹”和“纸张”图标显示树的父子节点，左侧的树由于只有子节点，用其他样式图标来替换“纸张”样式图标。          【实现】        思路一：        由于该项目前端使用ea
Ztree改版 - 将图标字体化 - fontAwesome
weixin_34221773的博客
12-07 356
引言 ps:小白可以一看，大神勿打~ 用过 ztree 的盆友们都知道，ztree 功能强大，就功能上来说，追求着“无处不按钮”的体验，但好用不好看。可能有朋友说：“我这棵树只有我自己看，够用就行” （我听不见，你没追求~）。对于这种更多时候是在背面展示的内容，我们追求一个词：简约，什么叫简约？简约就是：简单中透露着大气，朴实中内敛着奢华。呃~ 对不起，扯远了，看最终效果图： ...
ztree图标样式修改
最新发布
07-29
2. 修改图标样式之前，你需要了解 zTree 中使用的图标是字体图标，一般通过 CSS 类来控制。 3. 打开 zTree 的 CSS 文件，查找与图标相关的 CSS 类。一般情况下，这些类的命名以 "ico_" 开头。 4. 根据你的需求，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值