妙網科技 妙網科技 首頁 妙網科技 Flash 妙網科技 Flash使用Tree組件制作樹形菜單

Flash使用Tree組件制作樹形菜單

所屬欄目: Flash | 更新時間:2015-9-24 | 閱讀:2823 次
我們使用一個外部的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"); 
//設置沒有邊框


? 七乐彩走势图2012092