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 ...
随机推荐
- 独立安装WAMP
安装apache 获得apache安装软件: 建议去官网下载: www.apache.org 双击执行: 进入欢迎界面 点击"next"进入到协议界面 接收协议点击"ne ...
- dynamic programming 学习
这是看到一位大神,写的关于dynamic programming的博客,认为很好.简单分析下.然后给出链接. 背景问题就是 有一个国家,全部的国民都很老实憨厚,某天他们在自己的国家发现了十座金矿.而且 ...
- Android ListView Adapter的getItemViewType和getViewTypeCount多种布局
<Android ListView Adapter的getItemViewType和getViewTypeCount多种布局> 在Android的ListView中.假设在一个Lis ...
- HDU 1160 FatMouse's Speed (最长有序的上升子序列)
题意:给你一系列个w,s.要你找到最长的n使得 W[m[1]] < W[m[2]] < ... < W[m[n]] and S[m[1]] > S[m[2]] > ... ...
- JAVA入门[15]-过滤器filter
一.过滤器 过滤器是可用于 Servlet 编程的 Java 类,可以实现以下目的: 在客户端的请求访问后端资源之前,拦截这些请求. 在服务器的响应发送回客户端之前,处理这些响应. 参考:http:/ ...
- java泛型学习(一)
泛型也叫做参数化类型,顾名思义的去理解,就是把类型作为一个参数.类比方法的传参,我们举个例子. class A{ public void getX(int x){ System.out.println ...
- (转)java内部类详解
本文转自http://www.cnblogs.com/dolphin0520/p/3811445.html,谢谢作者 说起内部类这个词,想必很多人都不陌生,但是又会觉得不熟悉.原因是平时编写代码时可能 ...
- 苹果审核返回崩溃日志 iOS .crash文件处理 symbolicatecrash. 困扰我多年的牛皮癣根治了 看到这篇文章拿过来用下
AppStore审核被拒,返回crashLog.txt文件,可是打开后都是十六进制的地址,我们可以使用Xcode自带的 symbolicatecrash 解析得到我们需要的详细崩溃信息crashLog ...
- JavaScript 中 闭包 的详解
闭包是什么 在 JavaScript 中,闭包是一个让人很难弄懂的概念.ECMAScript 中给闭包的定义是:闭包,指的是词法表示包括不被计算的变量的函数,也就是说,函数可以使用函数之外定义的变量. ...
- 解决报错:IncompleteElementException: Could not find result map...
今天遇到这样一个报错,记录一下: org.apache.ibatis.builder.IncompleteElementException: Could not find result map com ...