定义ICON渲染器
<mx:Tree id="nodesTree" width="100%" height="100%"
showRoot="false" labelField="@label"
itemRenderer="common.IconTreeRenderer" />
<root label="A">
<node label="模型" icon="a.png" >
</root>
ICON Tree渲染器
读取XML里配置的icon图标路径,然后加载到树上面,隐藏树本身的ICON图标。
package common
{
import flash.xml.*;
import mx.collections.*;
import mx.controls.Alert;
import mx.controls.Image;
import mx.controls.listClasses.*;
import mx.controls.treeClasses.*;
/*
* ICON Tree的渲染器
*/
public class IconTreeRenderer extends TreeItemRenderer
{
protected var myImage:Image;
private var imageWidth:Number = 16;
private var imageHeight:Number = 16;
private static var defaultImg:String = "leaf.png";
public function IconTreeRenderer ()
{
super();
}
override protected function createChildren():void
{
super.createChildren();
myImage = new Image();
myImage.source = defaultImg;
myImage.width=imageWidth;
myImage.height=imageHeight;
myImage.setStyle( "verticalAlign", "middle" );
addChild(myImage);
}
//通过覆盖data方法来动态设置tree的节点图标
override public function set data(value:Object):void
{
super.data = value;
var imageSource:String=value.@icon;
if(imageSource!="")
{
myImage.source=imageSource;
}else{
myImage.source=defaultImg;
}
}
//隐藏原有图标,并设置它的坐标
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
if(super.data !=null)
{
if (super.icon != null)
{
myImage.x = super.icon.x;
myImage.y = 2;
super.icon.visible=false;
}
else
{
myImage.x = super.label.x;
myImage.y = 2;
super.label.x = myImage.x + myImage.width + 17;
}
}
}
}
}
分享到:
- 2009-06-02 15:15
- 浏览 3230
- 评论(0)
- 论坛回复 / 浏览 (0 / 3399)
- 查看更多
相关推荐
综上所述,修改Flex Tree的icon涉及到创建自定义渲染器、数据绑定、根据数据源动态设置图标等步骤。理解这些概念和技巧对于构建具有个性化视觉效果的Flex应用程序至关重要。在实践中,需要注意代码的可维护性和性能...
本文将深入探讨如何对 el-tree 进行样式功能修改,包括更换图标(icon)、实现输入框可编辑以及调整下拉展开图标的定位。我们将基于 Vue.js 框架进行讲解。 首先,让我们了解 el-tree 的基本使用。el-tree 是 ...
"EasyUI_Icon_图标扩展(1775个)" 是为了解决这个问题而创建的资源包。这个扩展包增加了1775个额外的图标,极大地丰富了可用的图标库,使得开发者能够选择更适合项目风格和功能需求的图标,提高应用的用户体验和...
4. **事件监听与响应**:zTree提供了丰富的事件系统,如`onClick`、`onCheck`等,我们可以通过监听这些事件,动态改变节点的图标。比如,当用户点击某个节点时,我们可以修改该节点的`icon`属性,然后调用`update...
修改iview-ui tree树结构...可以使用ui库自带的icon图标,也可以自己根据项目 需求添加背景图片。 并且包括点击当前的父级节点文字,展开/隐藏 子级菜单,同时背景高亮显示 下载后,直接npm install 就可以直接运行
通过监听用户操作,修改数据源(`treeData`),并重新渲染Tree组件,可以达到动态更新树结构的效果。这在构建具有层级关系的管理界面时非常有用。为了完整实现这个功能,你需要补充缺失的方法如`nodeDelete`和`...
1. **自定义图标(Custom Icons)**:通过 `icon` 属性,你可以为节点设置自定义图标。 2. **事件处理(Event Handling)**:利用 `on` 方法,可以监听 JsTree 的各种事件,如节点点击、拖放完成等。 3. **API ...
需求: vue-cli项目树形控件:一级节点为本地节点...el-tree class="treeitems" :data="data" node-key="id" :props="defaultProps" :load="loadNode" lazy :default-expanded-keys="[0]" @node-click="handle
对于Tree组件,你可以通过修改`.x-tree-node-icon`、`.x-tree-node-text`等类来调整节点图标和文本的样式。 ### 总结 ExtJS的Tree组件是一个功能强大且高度可定制的工具,用于展示分层数据。通过上述介绍,你应该...
layui tree的样式可以通过修改layui.css文件进行定制,包括节点的背景色、文字颜色、边框、图标等。同时,也可以通过CSS类`layui-tree-icon`、`layui-tree-node`等进行更细致的调整。 7. **扩展功能**: layui ...
.x-tree-node-collapsed .x-tree-node-icon { background:transparent url(web/css/images/default/tree/1.gif); } .x-tree-node-expanded .x-tree-node-icon { background:transparent url(web/css/images/default...
* 【修改】放大浏览器后导致 界面出现多余连接线的bug (需要更新:icon 图标和 css ) * 【修改】在编辑状态,如果节点名超过编辑框宽度,左右键在框内不起作用的bug(IE 6 7 8 出现) CSS 中 filter:alpha...
可以通过添加特定的类名(如 `ui-icon`)来设置图标。 ```html <ul id="tree"> 节点1 子节点1 子节点2 节点2 ``` - **应用插件**:使用 jQuery 选择器找到树的容器,并调用 `tree` 方法来初始化插件。 ...
- **图标控制**:通过`icon`属性,可以设置节点的图标,支持layui内置图标或自定义图标URL。 - **事件绑定**:除了`click`,还有`check`(复选框状态改变)、`spread`(节点展开/折叠)等事件可以监听。 6. **...
使用`SetImageList`方法设置图像列表,传入小图标和大图标列表的句柄。 ```cpp CImageList imageList; imageList.Create(16, 16, ILC_COLOR32, 2, 2); // 加载图标资源 imageList.Add(AfxGetApp()->LoadIcon(IDI_...
它提供了对树控件的各种操作接口,包括添加、删除、选中和修改节点等。 ### 2. 创建 Tree 控件 创建一个树控件通常涉及以下几个步骤: 1. 在资源编辑器中添加一个 `WS_VISIBLE | WS_CHILD | TVS_HASLINES` 样式的 `...
symbol: 'image://path/to/your/icon.png', // 设置节点图标路径 }] ``` 这里,'symbol'属性可以设置为图片URL,也可以是内置的图形,如'square'、'circle'等。 **自定义展示样式:** 节点的样式可以进一步定制,...
3. 设置节点图标:在插入或修改节点时,使用`CTreeCtrl::SetItem()`函数,指定`hItem`(节点句柄)、`mask`(标志,如TVIF_IMAGE和TVIF_SELECTEDIMAGE)、`iImage`(正常状态下图标的索引)和`iSelectedImage`(选中...
.popup-content.cats-tree.fst-cat-icon{background:url();} ``` 同样的,`url()`应该包含一个指向分类图标的具体URL。 ### 总结 以上就是对“淘宝导航修改代码”的详细解析,主要涵盖了背景颜色设置、边框颜色设置...