ztree使用font-awesome字体的问题,
ztree要使用自定义图标字体的时候 需要自己做皮肤cssstyle,官方有文档,但是有些时候我们值需要简单的设置图标字体class样式 是没办法使用的,我们需要对两个函数进行修改。
下面是两个函数请自己看注释
expandCollapseNode是节点折叠展开的函数
expandCollapseNode: function (setting, node, expandFlag, animateFlag, callback) {
var root = data.getRoot(setting),
childKey = setting.data.key.children;
var tmpCb, _callback;
if (!node) {
tools.apply(callback, []);
return;
}
if (root.expandTriggerFlag) {
_callback = callback;
tmpCb = function () {
if (_callback) _callback();
if (node.open) {
setting.treeObj.trigger(consts.event.EXPAND, [setting.treeId, node]);
} else {
setting.treeObj.trigger(consts.event.COLLAPSE, [setting.treeId, node]);
}
};
callback = tmpCb;
root.expandTriggerFlag = false;
}
if (!node.open && node.isParent && ((!$$(node, consts.id.UL, setting).get(0)) || (node[childKey] && node[childKey].length > 0 && !$$(node[childKey][0], setting).get(0)))) {
view.appendParentULDom(setting, node);
view.createNodeCallback(setting);
}
if (node.open == expandFlag) {
tools.apply(callback, []);
return;
}
var ulObj = $$(node, consts.id.UL, setting),
switchObj = $$(node, consts.id.SWITCH, setting),
icoObj = $$(node, consts.id.ICON, setting);
if (node.isParent) {
node.open = !node.open;
if (node.iconOpen && node.iconClose) {
icoObj.attr("style", view.makeNodeIcoStyle(setting, node));
}
if (node.open) { //这个判断打开的时候用什么图标
view.replaceSwitchClass(node, switchObj, consts.folder.OPEN);
view.replaceIcoClass(node, icoObj, consts.folder.OPEN);//这里替换的是 span的class 进去自行修改
if (animateFlag == false || setting.view.expandSpeed == "") {
ulObj.show();
tools.apply(callback, []);
} else {
if (node[childKey] && node[childKey].length > 0) {
ulObj.slideDown(setting.view.expandSpeed, callback);
} else {
ulObj.show();
tools.apply(callback, []);
}
}
} else {
view.replaceSwitchClass(node, switchObj, consts.folder.CLOSE);
view.replaceIcoClass(node, icoObj, consts.folder.CLOSE);//这里替换的是 span的class 进去自行修改
if (animateFlag == false || setting.view.expandSpeed == "" || !(node[childKey] && node[childKey].length > 0)) {
ulObj.hide();
tools.apply(callback, []);
} else {
ulObj.slideUp(setting.view.expandSpeed, callback);
}
}
} else {
tools.apply(callback, []);
}
}
MakNodeIcoClass是加载节点生成class的函数 如果这里像我这里修改 需要把 expandCollapseNode函数的两行代码注视掉:view.replaceIcoClass(node, icoObj, consts.folder.CLOSE)
//makeNodeIcoClass 负责加载节点的时候生成class
//我根据自己需求改了一下,注视掉的代码 都是原始代码
makeNodeIcoClass: function (setting, node) {
var icoCss = ["ico"];
if (!node.isAjaxing) {
icoCss[0] = (node.iconSkin ? node.iconSkin /*+ "_" */: "");// + icoCss[0];
if (node.isParent) {
//icoCss.push(node.open ? consts.folder.OPEN : icoCss.join('_')/*consts.folder.CLOSE*/);
} else {
//icoCss.push(consts.folder.DOCU);
}
}
return /*consts.className.BUTTON + " " +*/ icoCss.join('_');
}
通过上面的修改以后,我们只需要 给出 iconSkin 就可以了,iconClose 和 iconOpen 如果按照我这种改法是没办法使用的。 需要再进一步修改。
[{"id":10,"name":"test","pId":0,"iconSkin":"fa fa-link","url":"/system/Category/Details/10","iconOpen":null,"iconClose":null}]
不需要注视上面提到的两行代码,需要修改replaceIcoClass函数如下,
replaceIcoClass: function (node, obj, newName) {
if (!obj || node.isAjaxing) return;
var tmpName = obj.attr("class");
if (tmpName == undefined) return;
var tmpList = tmpName.split("_");
switch (newName) {
case consts.folder.OPEN:
tmpList[tmpList.length - 1] = node.iconOpen;
break;
case consts.folder.CLOSE:
tmpList[tmpList.length - 1] = node.iconClose;
break;
case consts.folder.DOCU:
//tmpList[tmpList.length-1] = newName;
tmpList[tmpList.length - 1] = node.iconSkin;
break;
}
//obj.attr("class", tmpList[tmpList.length - 1]);
obj.attr("class", tmpList.join("_"));
}
上面的改法都是根据个人需求而定,我这个是在学习 洞庭夕照(传送门)大神的教学系列修改的。
ztree使用font-awesome字体的问题,的更多相关文章
- Font Awesome字体图标
1.什么是字体图标字体图标是一个包含许多图标的字体库.可以理解为一种特殊的字体,只不过里面包含的都是图标. 2.Font Awesome图标字体库Font Awesome是目前最受欢迎最全面的图标字体 ...
- C#使用Font Awesome字体
这个类是一个开源类,我做了一些功能优化1.如果没有安装Font Awesome字体,可能需要直接去exe路径下使用对应名称字体.2.可以直接返回\uFxxx类型字体,方便winform按钮使用,不然的 ...
- Awesome图标 | 如何在某些编辑软件中使用Font Awesome字体图标
文章目录 Font Awesome 字体图标 在某些编辑软件中使用 Font Awesome 字体图标 Font Awesome 为您提供可缩放矢量图标,它可以被定制大小.颜色.阴影以及任何可以用 C ...
- Font Awesome 字体使用方法, 兼容ie7+
WebFont 技术可以让网页使用在线字体,而无需使用图片,从而有机会解决开头设计师提到的问题.它通过 CSS 的@font-face语句引入在线字体,使用 CSS 选择器指定运用字体的文本,与此同时 ...
- (22)bootstrap 初识 + Font Awesome(字体图标库)
bootstrap作用就是简化布局 bootstrap是基于JQ的,所以内部代码使用的是jq语法 所以要使用bs,必须先倒入 1.head标签内倒入bs的css文件 <link rel=&qu ...
- 在nuxt中引入Font Awesome字体图标库
介绍 在element-ui框架中提供了一些图标样式,但是种类比较少,所以在这里提供一套更完善的字体图标库Font Awesome(官方文档),下面就开始介绍如何在一个nuxt项目中使用这套字体库. ...
- css常用样式font控制字体的多种变换
CSS 字体属性定义文本的字体系列.大小.加粗.风格(如斜体)和变形(如小型大写字母)font-family控制字体,由于各个电脑系统安装的字体不尽相同,但是基本装有黑体.宋体与微软雅黑这三款字体,通 ...
- javascript入门 之 ztree(五 自定义字体)
<!--<!DOCTYPE html>--> <!--<HTML>--> <!--<HEAD>--> <!--<TI ...
- CSS3使用Font Awesome字体图标的控件样例(按钮,工具栏,输入框)
按钮上加入font awesome图标,用原生的input button标签无法实现,查看网上的只能通过<a><li></li></a>实现此功能,通过 ...
- LaTex Font Size 字体大小命令
LaTex中字体大小有很多中等级,分别由下列命令控制: \tiny \scriptsize \footnotesize \small \normalsize \large \Large \LARGE ...
随机推荐
- FSharp 调用 Oracle.ManagedDataAccess.dll
FSharp 调用 Oracle.ManagedDataAccess.dll 1.Oracle.ManagedDataAccess.dll 的下载地址.好像如今必需要注冊才干下载. 即使是 64 位系 ...
- REST设计规则
1.简介 REST(Representational State Transfer), 表述性状态转移是Roy Fielding博士在2000年他的博士论文中提出来的一种软件架构风格. REST只是一 ...
- 接触HTML和CSS心得体会
1.HTML 它负责网页的三个要素之中的结构: HTML使用标签的形式来标识网页中的不同组成部分 <!DOCTYPE html> <html> <head> < ...
- python实现斐波那契数列(Fibonacci sequence)
使用Python实现斐波那契数列(Fibonacci sequence) 斐波那契数列形如 1,1,2,3,5,8,13,等等.也就是说,下一个值是序列中前两个值之和.写一个函数,给定N,返回第N个斐 ...
- VMware 虚拟机 Ubuntu 登录后蓝屏问题
问题起因 在一次下班收工时关闭虚拟机 Ubuntu,出现异常:关机好久没有完成,进而导致 VMware 软件卡死.后来强行杀死 VMware.第二天上班,启动 VMware 后开启 Ubuntu,输入 ...
- 字符设备 Vs. 块设备 Character Device Vs. Block Device
字符设备是指驱动发送/接受单个字符(例如字节)的设备. 块设备是指驱动发送/接受整块数据(例如512个字节为一个块)的设备. 常见的字符设备:串口,并口,声卡. 常见的块设备:硬盘(最小读取单位为扇区 ...
- python爬虫入门学习
近期写的一个爬虫的Demo,只是简单的用了几个函数.实现了简单的爬取网页的功能(以途牛为例). import urllib2 import re import urlparse import robo ...
- 使用node的fs读取文件
啊啊啊啊啊啊啊啊啊啊啊啊啊啊,被node的fs坑了一下午,我又爬上来了,要坚强的笑着活下去,嗯,没毛病老铁. let http = require('http'); let fs = require( ...
- iOS 轻松实现自定义TabBar
自定义TabBar的案例网上不少,昨天受到开发小伙伴的影响,尝试了一下非大神的取巧思路:Demo 1.创建RootViewController,后面创建几个继承的VC,将这几个VC添加到TabBarC ...
- windows server 2008 R2服务器安装IIS并添加网站
一.连接远程计算机 1.因为我的电脑是win7系统,故这里以win7为例,其他windows系统大同小异,首先点开开始菜单栏,在windows附件下找到远程桌面连接 或者采用通用的方法,利用快捷键wi ...