Flash使用Tree组件制作树形菜单
所属栏目： Flash | 更新时间：2015-9-24 | 阅读：5019 次
我们使用一个外部的XML文件作为菜单的数据内容,因为这样方便修改
XML文档:(source.xml)
<?xml version="1.0" encoding="UTF-8"?>
<root>
<node label="目录一">
<node label="我的Blog" data="http://blog.51ww.com/skykin"/>
<node label="栏目二" data="http://blog.51ww.com/skykin"/>
<node label="栏目一" data="http://blog.51ww.com/skykin"/>
</node>
<node label="目录二">
<node label="栏目一" data="http://blog.51ww.com/skykin"/>
<node label="栏目二" data="http://blog.51ww.com/skykin"/>
</node>
<node label="目录三">
<node label="栏目一" data="http://blog.51ww.com/skykin"/>
<node label="栏目二" data="http://blog.51ww.com/skykin"/>
</node>
</root>
FLASH部分:
从组件窗口里拖出一个"Tree"组件放到舞台上,命名实例名为:myTree
然后在帧上加入以下动作代码:
myTree.vScrollPolicy = "auto";//自动隐藏/显示滚动条
/*定义一个触发事件*/
listenerObject = new Object();
listenerObject.change = function(evtObject){
var url = evtObject.target.selectedItem.attributes.data;
if(url != undefined){
getURL(url,"_blank");
}
}
myTree.addEventListener("change", listenerObject);
/*从外部载入XML菜单列表*/
var myTreeDP:XML = new XML();
myTreeDP.ignoreWhite = true;
myTree.dataProvider = new XML("<node label=’正在载入...’/>");
myTreeDP.load("source.xml");
myTreeDP.onLoad = function(session:Boolean){
if(session){
myTree.dataProvider = myTreeDP.lastChild;//读取子节点的内容作为菜单列表,可以是不带属性或带属性:".firstChild"那样的话会产生一个根节点
}
XML文档:(source.xml)
<?xml version="1.0" encoding="UTF-8"?>
<root>
<node label="目录一">
<node label="我的Blog" data="http://blog.51ww.com/skykin"/>
<node label="栏目二" data="http://blog.51ww.com/skykin"/>
<node label="栏目一" data="http://blog.51ww.com/skykin"/>
</node>
<node label="目录二">
<node label="栏目一" data="http://blog.51ww.com/skykin"/>
<node label="栏目二" data="http://blog.51ww.com/skykin"/>
</node>
<node label="目录三">
<node label="栏目一" data="http://blog.51ww.com/skykin"/>
<node label="栏目二" data="http://blog.51ww.com/skykin"/>
</node>
</root>
FLASH部分:
从组件窗口里拖出一个"Tree"组件放到舞台上,命名实例名为:myTree
然后在帧上加入以下动作代码:
myTree.vScrollPolicy = "auto";//自动隐藏/显示滚动条
/*定义一个触发事件*/
listenerObject = new Object();
listenerObject.change = function(evtObject){
var url = evtObject.target.selectedItem.attributes.data;
if(url != undefined){
getURL(url,"_blank");
}
}
myTree.addEventListener("change", listenerObject);
/*从外部载入XML菜单列表*/
var myTreeDP:XML = new XML();
myTreeDP.ignoreWhite = true;
myTree.dataProvider = new XML("<node label=’正在载入...’/>");
myTreeDP.load("source.xml");
myTreeDP.onLoad = function(session:Boolean){
if(session){
myTree.dataProvider = myTreeDP.lastChild;//读取子节点的内容作为菜单列表,可以是不带属性或带属性:".firstChild"那样的话会产生一个根节点
}
}
==================================================
因为前两天正好要用TREE组件做个菜单，所以遇到了很多问题，查了很多资料．所以现将部分资料整理出来，希望对想用的人有帮助．
1.关于图标的更改
myTree.iconFunction = function(item) {
if (this.getIsBranch(item)) { //我这里是先判断这个结点是不是父结点
if (item.attributes.data != null) { //这里判断的是这个结点里的DATA以判断他是不是根结点，因为我需要两类结点显示不同图标
return item.attributes.data;
} else {
return "LINK名称";
}
} else {
return "LINK名称";
}
};
2.关于滚动条
if (this.getIsBranch(item)) { //我这里是先判断这个结点是不是父结点
if (item.attributes.data != null) { //这里判断的是这个结点里的DATA以判断他是不是根结点，因为我需要两类结点显示不同图标
return item.attributes.data;
} else {
return "LINK名称";
}
} else {
return "LINK名称";
}
};
myTree.vScrollPolicy = "auto";//这个是设置竖滚动条的显示状态．横向的同里．
3.关于Tree的外观
myTree.setStyle("indentation", 7);
//缩进
myTree.setStyle("backgroundColor", 0xDFDFDF);
//背景色
myTree.setStyle("rollOverColor", 0xFFFFFF);
//鼠标Rollover时的颜色．
myTree.setStyle("selectionColor", 0xFFFFFF);
//鼠标点击的颜色
myTree.setStyle("disclosureOpenIcon", "mc");
myTree.setStyle("disclosureClosedIcon", "mc");
//这个就是每个有扩展内容的结点前的那个三角形图标．分别对应打开还是关闭
myTree.setStyle("borderStyle", "none");
//设置没有边框
//缩进
myTree.setStyle("backgroundColor", 0xDFDFDF);
//背景色
myTree.setStyle("rollOverColor", 0xFFFFFF);
//鼠标Rollover时的颜色．
myTree.setStyle("selectionColor", 0xFFFFFF);
//鼠标点击的颜色
myTree.setStyle("disclosureOpenIcon", "mc");
myTree.setStyle("disclosureClosedIcon", "mc");
//这个就是每个有扩展内容的结点前的那个三角形图标．分别对应打开还是关闭
myTree.setStyle("borderStyle", "none");
//设置没有边框
陕ICP备13005001号-1
陕公网安备 61102302611024号
工商监管