????????今天使用中繼器來實(shí)現(xiàn)一個(gè)簡(jiǎn)單的二級(jí)導(dǎo)航欄晓褪。這是一款折疊形可變導(dǎo)航涣仿，一般應(yīng)用在系統(tǒng)頁面左側(cè)好港。它的最大優(yōu)勢(shì)是：1钧汹、菜單根據(jù)中繼器配置的列表動(dòng)態(tài)加載整個(gè)導(dǎo)航菜單（后期系統(tǒng)維護(hù)升級(jí)可快速增減菜單）拔莱。2、二級(jí)導(dǎo)航菜單數(shù)量不等也可以正常工作（突破局限）讼渊。
? ? ? ? 下面以制作一個(gè)簡(jiǎn)單的后臺(tái)管理系統(tǒng)導(dǎo)航為例爪幻。

一挨稿、準(zhǔn)備元件

1京痢、將工作界面劃分為三塊：頭部放一個(gè)動(dòng)態(tài)面板祭椰，里面放系統(tǒng)logo和系統(tǒng)名稱吭产；左側(cè)導(dǎo)航區(qū)域放一個(gè)動(dòng)態(tài)面板臣淤，里面放一個(gè)中繼器邑蒋；右側(cè)放一個(gè)內(nèi)聯(lián)框架(動(dòng)態(tài)交互區(qū)域)医吊。

2卿堂、雙擊中繼器草描，進(jìn)入中繼器編輯模式穗慕。復(fù)制矩形元件并粘貼多三個(gè)逛绵，共四個(gè)按右對(duì)齊排列。如下圖所示瓢对，一級(jí)導(dǎo)航（w:180px沥曹，h：30px）妓美，二級(jí)導(dǎo)航（w:160px鲤孵，h:25px）。注意贵试，各矩形件元件間的行高是10px毙玻，各矩形元件的填入文字及命名見圖桑滩。
將所有二級(jí)導(dǎo)航選中运准，將它們?cè)O(shè)置為一個(gè)組合胁澳，命名為：組合_二級(jí)導(dǎo)航韭畸。這個(gè)組合用于點(diǎn)擊一級(jí)導(dǎo)航進(jìn)行交互時(shí)陆盘，實(shí)現(xiàn)組合整體展開/收縮（隱藏/顯示）隘马。
再將它們?cè)O(shè)置為一個(gè)選項(xiàng)組酸员，命名為：選項(xiàng)組_二級(jí)導(dǎo)航。這個(gè)選項(xiàng)組用于點(diǎn)擊二級(jí)導(dǎo)航進(jìn)行交互時(shí)酿愧，實(shí)現(xiàn)只選中一個(gè)二級(jí)導(dǎo)航嬉挡。注意：要將所有二級(jí)導(dǎo)航選中，右鍵選中：選項(xiàng)組基括，命名為：選項(xiàng)組_二級(jí)導(dǎo)航财岔。不是將它們的組合設(shè)置為選項(xiàng)組匠璧。
同樣夷恍，將一級(jí)導(dǎo)航也設(shè)置為一個(gè)選項(xiàng)組裁厅，命名為：選項(xiàng)組_一級(jí)導(dǎo)航执虹。

二、設(shè)置元件樣式

1当叭、設(shè)置中繼器的行距磺芭。即間距為10px钾腺。

2放棒、設(shè)置一級(jí)導(dǎo)航和二級(jí)導(dǎo)航的鼠標(biāo)懸停、選中的樣式吴旋。一級(jí)導(dǎo)航和二級(jí)導(dǎo)航鼠標(biāo)懸停樣式設(shè)置，填充顏色為：FFCC99褂傀；一級(jí)導(dǎo)航選中樣式設(shè)置仙辟，字色為：FFCCCC叠国；二級(jí)導(dǎo)航選中樣式設(shè)置，填充顏色為：FFCCCC;

三项棠、設(shè)置導(dǎo)航數(shù)據(jù)。以后系統(tǒng)升級(jí)挎峦，增減導(dǎo)航就是通過設(shè)置導(dǎo)航數(shù)據(jù)來完成香追。

1、設(shè)置中繼器樣式數(shù)據(jù)坦胶。選中：中繼器透典，選中：樣式。

2顿苇、設(shè)置樣式數(shù)據(jù)列名峭咒。雙擊第一列：Column0，重新命名為：FirstLevel纪岁。這一列對(duì)應(yīng)的是一級(jí)導(dǎo)航凑队。雙擊第二列短条，命名為：SecLevel1赋访。重復(fù)操作，得到?SecLevel2、SecLevel3。SecLevel1鹦付、SecLevel2祈噪、SecLevel3分別對(duì)應(yīng)的是二級(jí)導(dǎo)航1、二級(jí)導(dǎo)航2、二級(jí)導(dǎo)航3。

3逗载、設(shè)置樣式數(shù)據(jù)內(nèi)容码荔。這是導(dǎo)航顯示的結(jié)構(gòu)數(shù)據(jù)触幼，或者說，導(dǎo)航將根據(jù)設(shè)置的樣式數(shù)據(jù)內(nèi)容來顯示。以后系統(tǒng)升級(jí)，只要修改這個(gè)數(shù)據(jù)內(nèi)容即可镜沽。根據(jù)需求蔬墩，這里設(shè)置的數(shù)據(jù)如下：

四、設(shè)置交互

1鸵熟、設(shè)置載入時(shí)事件煮盼。在載入元件時(shí)，根據(jù)顯示樣式數(shù)據(jù)設(shè)置的值作為導(dǎo)航文本梗脾。
選中：中繼器梭冠，選中：交互盐捷。選擇事件：載入時(shí)，選擇：設(shè)置文本秦爆，選擇：添加目標(biāo)望门。選中：一級(jí)導(dǎo)航桐早。點(diǎn)擊 fx，彈出編輯框祷膳。如下圖：

刪除中間輸入框中的：一級(jí)導(dǎo)航。點(diǎn)擊：插入變量或函數(shù)，選中：Item.FirstLeve，得到結(jié)果着撩。如下圖：

同樣崩溪，設(shè)置二級(jí)導(dǎo)航1、二級(jí)導(dǎo)航2狡汉、二級(jí)導(dǎo)航3 的 fx 值分別為 Item.SecLeve1、Item.SecLeve2闽颇、Item.SecLeve3盾戴。得到結(jié)果，如下圖：

2兵多、設(shè)置每項(xiàng)加載事件尖啡。在每項(xiàng)加載時(shí)，根據(jù)顯示樣式數(shù)據(jù)設(shè)置的值顯示或隱藏二級(jí)導(dǎo)航剩膘。從而實(shí)現(xiàn)二級(jí)導(dǎo)航菜單數(shù)量不等也可以工作衅斩。
選中：中繼器，選中：交互怠褐。選擇事件：每項(xiàng)加載畏梆，選擇：?jiǎn)⒂们樾巍Ｌ砑訔l件奈懒，第一個(gè)框選中：值奠涌，點(diǎn)擊第二個(gè)框：fx，選中：Item.SecLevel1磷杏。如下圖：

在此情形下溜畅，添加動(dòng)作，選擇：顯示/隱藏极祸，添加目標(biāo)：二級(jí)導(dǎo)航1慈格，選中：隱藏動(dòng)作怠晴。這個(gè)設(shè)置是實(shí)現(xiàn)當(dāng)二級(jí)導(dǎo)航1對(duì)應(yīng)的數(shù)據(jù)值為空時(shí)，隱藏該二級(jí)導(dǎo)航菜單選擇項(xiàng)浴捆。同樣龄寞，設(shè)置二級(jí)導(dǎo)航2、二級(jí)導(dǎo)航3汤功。得到結(jié)果，如下圖：

3溜哮、設(shè)置二級(jí)導(dǎo)航的組合整體展開/收縮滔金。即當(dāng)點(diǎn)擊一下一級(jí)導(dǎo)航時(shí)，或展開茂嗓，或隱藏其下面全部二級(jí)導(dǎo)航餐茵。
選中：一級(jí)導(dǎo)航，點(diǎn)擊：新建交互述吸，選擇：?jiǎn)螕魰r(shí)忿族，選擇動(dòng)作：顯示或隱藏。選擇目標(biāo)：組合_二級(jí)導(dǎo)航蝌矛，選擇：切換道批。設(shè)置參數(shù)，如下圖：

如果想實(shí)現(xiàn)初次加載導(dǎo)航時(shí)入撒，二級(jí)導(dǎo)航是折疊的隆豹。即只看到一級(jí)導(dǎo)航。則可以將二級(jí)導(dǎo)航的組合設(shè)置為隱藏茅逮。
雙擊：中繼器璃赡，選中：組合_二級(jí)導(dǎo)航，右鍵献雅，選擇：設(shè)為隱藏碉考。

4、設(shè)置二級(jí)導(dǎo)航的單擊事件挺身。二級(jí)導(dǎo)航選中時(shí)侯谁，父級(jí)也選中。同時(shí)章钾，在內(nèi)聯(lián)框架中打開鏈接頁面良蒸。
選中：二級(jí)導(dǎo)航1，選擇事件：?jiǎn)螕魰r(shí)伍玖，點(diǎn)擊：?jiǎn)⒂们樾文厶担c(diǎn)擊：添加條件，選擇：值窍箍，點(diǎn) fx串纺，點(diǎn)擊：插入變量或函數(shù)丽旅，選擇：Item.SecLevel1，設(shè)置值：角色列表纺棺。添加動(dòng)作：設(shè)置選中榄笙，選擇目標(biāo)：二級(jí)導(dǎo)航1，值為真祷蝌。添加目標(biāo)茅撞，選中：一級(jí)導(dǎo)航，值為真巨朦。添加動(dòng)作：框架中打開鏈接米丘，選擇元件：內(nèi)聯(lián)框架，選擇頁面：角色列表糊啡。

同樣拄查，添加情形2，設(shè)置二級(jí)導(dǎo)航1對(duì)應(yīng)的第二行數(shù)據(jù)：系統(tǒng)日志棚蓄。如果有第3行...堕扶，也同樣設(shè)置。得到結(jié)果梭依，如下圖：

同樣稍算，設(shè)置：二級(jí)導(dǎo)航2、二級(jí)導(dǎo)航3 的單擊事件役拴。

至此邪蛔，使用中繼器來實(shí)現(xiàn)二級(jí)導(dǎo)航欄制作完畢。按F5預(yù)覽下效果扎狱。