Flash使用Tree組件制作樹形菜單
所屬欄目: Flash | 更新時(shí)間:2015-9-24 | 閱讀:6701 次
我們使用一個(gè)外部的XML文件作為菜單的數(shù)據(jù)內(nèi)容,因?yàn)檫@樣方便修改
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部分:
從組件窗口里拖出一個(gè)"Tree"組件放到舞臺(tái)上,命名實(shí)例名為:myTree
然后在幀上加入以下動(dòng)作代碼:
myTree.vScrollPolicy = "auto";//自動(dòng)隱藏/顯示滾動(dòng)條
/*定義一個(gè)觸發(fā)事件*/
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;//讀取子節(jié)點(diǎn)的內(nèi)容作為菜單列表,可以是不帶屬性或帶屬性:".firstChild"那樣的話會(huì)產(chǎn)生一個(gè)根節(jié)點(diǎn)
}
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部分:
從組件窗口里拖出一個(gè)"Tree"組件放到舞臺(tái)上,命名實(shí)例名為:myTree
然后在幀上加入以下動(dòng)作代碼:
myTree.vScrollPolicy = "auto";//自動(dòng)隱藏/顯示滾動(dòng)條
/*定義一個(gè)觸發(fā)事件*/
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;//讀取子節(jié)點(diǎn)的內(nèi)容作為菜單列表,可以是不帶屬性或帶屬性:".firstChild"那樣的話會(huì)產(chǎn)生一個(gè)根節(jié)點(diǎn)
}
}
==================================================
因?yàn)榍皟商煺靡肨REE組件做個(gè)菜單,所以遇到了很多問題,查了很多資料.所以現(xiàn)將部分資料整理出來,希望對(duì)想用的人有幫助.
1.關(guān)于圖標(biāo)的更改
myTree.iconFunction = function(item) {
if (this.getIsBranch(item)) { //我這里是先判斷這個(gè)結(jié)點(diǎn)是不是父結(jié)點(diǎn)
if (item.attributes.data != null) { //這里判斷的是這個(gè)結(jié)點(diǎn)里的DATA以判斷他是不是根結(jié)點(diǎn),因?yàn)槲倚枰獌深惤Y(jié)點(diǎn)顯示不同圖標(biāo)
return item.attributes.data;
} else {
return "LINK名稱";
}
} else {
return "LINK名稱";
}
};
2.關(guān)于滾動(dòng)條
if (this.getIsBranch(item)) { //我這里是先判斷這個(gè)結(jié)點(diǎn)是不是父結(jié)點(diǎn)
if (item.attributes.data != null) { //這里判斷的是這個(gè)結(jié)點(diǎn)里的DATA以判斷他是不是根結(jié)點(diǎn),因?yàn)槲倚枰獌深惤Y(jié)點(diǎn)顯示不同圖標(biāo)
return item.attributes.data;
} else {
return "LINK名稱";
}
} else {
return "LINK名稱";
}
};
myTree.vScrollPolicy = "auto";//這個(gè)是設(shè)置豎滾動(dòng)條的顯示狀態(tài).橫向的同里.
3.關(guān)于Tree的外觀
myTree.setStyle("indentation", 7);
//縮進(jìn)
myTree.setStyle("backgroundColor", 0xDFDFDF);
//背景色
myTree.setStyle("rollOverColor", 0xFFFFFF);
//鼠標(biāo)Rollover時(shí)的顏色.
myTree.setStyle("selectionColor", 0xFFFFFF);
//鼠標(biāo)點(diǎn)擊的顏色
myTree.setStyle("disclosureOpenIcon", "mc");
myTree.setStyle("disclosureClosedIcon", "mc");
//這個(gè)就是每個(gè)有擴(kuò)展內(nèi)容的結(jié)點(diǎn)前的那個(gè)三角形圖標(biāo).分別對(duì)應(yīng)打開還是關(guān)閉
myTree.setStyle("borderStyle", "none");
//設(shè)置沒有邊框
//縮進(jìn)
myTree.setStyle("backgroundColor", 0xDFDFDF);
//背景色
myTree.setStyle("rollOverColor", 0xFFFFFF);
//鼠標(biāo)Rollover時(shí)的顏色.
myTree.setStyle("selectionColor", 0xFFFFFF);
//鼠標(biāo)點(diǎn)擊的顏色
myTree.setStyle("disclosureOpenIcon", "mc");
myTree.setStyle("disclosureClosedIcon", "mc");
//這個(gè)就是每個(gè)有擴(kuò)展內(nèi)容的結(jié)點(diǎn)前的那個(gè)三角形圖標(biāo).分別對(duì)應(yīng)打開還是關(guān)閉
myTree.setStyle("borderStyle", "none");
//設(shè)置沒有邊框