你的位置:首页 > 网页设计

[网页设计]webix.tree 修改图标


今天用工作的时候改变了easyui的tree的图标,回家试了下webix tree的图标修改 。文档里面给出了个下面的demo。

webix.ui({  view:"tree",  type:{    folder:function(obj){      if(obj.$level == 1)        return "<span class='webix_icon fa-folder-open'></span>";      if (obj.$level == 2)        return "<span class='webix_icon fa-video-camera'></span>";    }  }});

查看源代码发现obj为data中每个节点的数据。他原来的icon好像也是某个样式,就没有覆盖,模仿easyui tree 加iconCls 就可以改变图标重新定义了下type的foder。效果图如下

webix有很多图标,这里列了几个生活中常出现的图标,具体图标可以去看下另一个随笔。列了500多种。代码如下

<!DOCTYPE html><html><head lang="en">  <meta charset="UTF-8">  <link rel="stylesheet" href="http://cdn.webix.com/edge/webix.css" type="text/css" media="screen" charset="utf-8">  <script src="http://cdn.webix.com/edge/webix.js" type="text/javascript" charset="utf-8"></script>  <title>webix树标签</title></head><body><script>  webix.ui({    view: "tree",    width: 260,    drag: true,     type: {      folder: function (obj) {        if (obj.iconCls)          return "<span class='webix_icon fa-" + obj.iconCls + "'></span>";      }    },    data: [{      open: true,      value: "配置管理",      iconCls: "cogs",      data: [{        iconCls: "cog",        value: "进货管理"      }, {        iconCls: "leaf",        value: "出货管理"      }, {        iconCls: "heart",        value: "配置发布"      }]    }, {      value: "报表管理",      open: true,      iconCls: "bar-chart-o",      data: [{        iconCls: "qq",        value: "访问量报表"      }]    }, {      value: "账户管理",      iconCls: "wechat",      open: true,      data: [{        iconCls: "android",        value: "个人账户管理"      }, {        iconCls: "apple",        value: "系统账户管理"      }]    }],
on: {
"onItemClick": function (id) {
var item = this.getItem(id);
webix.alert({title:"提示",text:item.value});
}
}
}) ; 

</script>

</body>

</html>

红色部分代码,是改变图标的关键,可以直接放到html文件中,打开就能看到效果。还有webix有很多种样式,我用的是灰色的。你们的可能是彩色的。

 

webix是js前端框架,整个代码除了<body>以外的。 几乎都是js,。要是用单页模式开发。只要写一个index.html文件。整个系统的前端都可以用js完成。

 

要够150 凑下字数-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------