妙网科技 妙网科技 首页 妙网科技 Flash 妙网科技 Flash使用Tree组件制作树形菜单

Flash使用Tree组件制作树形菜单

所属栏目: Flash | 更新时间:2015-9-24 | 阅读:5176 次
我们使用一个外部的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"那样的话会产生一个根节点 

}

==================================================

因为前两天正好要用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.关于滚动条
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"); 
//设置没有边框