????????今天使用中繼器來實(shí)現(xiàn)一個(gè)簡單的二級(jí)導(dǎo)航欄。這是一款折疊形可變導(dǎo)航，一般應(yīng)用在系統(tǒng)頁面左側(cè)。它的最大優(yōu)勢是：1、菜單根據(jù)中繼器配置的列表動(dòng)態(tài)加載整個(gè)導(dǎo)航菜單（后期系統(tǒng)維護(hù)升級(jí)可快速增減菜單）。2、二級(jí)導(dǎo)航菜單數(shù)量不等也可以正常工作（突破局限）。
? ? ? ? 下面以制作一個(gè)簡單的后臺(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è)按右對齊排列。如下圖所示，一級(jí)導(dǎo)航（w:180px，h：30px），二級(jí)導(dǎo)航（w:160px，h:25px）。注意，各矩形件元件間的行高是10px，各矩形元件的填入文字及命名見圖。
將所有二級(jí)導(dǎo)航選中，將它們設(shè)置為一個(gè)組合，命名為：組合_二級(jí)導(dǎo)航。這個(gè)組合用于點(diǎn)擊一級(jí)導(dǎo)航進(jìn)行交互時(shí)，實(shí)現(xiàn)組合整體展開/收縮（隱藏/顯示）。
再將它們設(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。這一列對應(yīng)的是一級(jí)導(dǎo)航。雙擊第二列，命名為：SecLevel1。重復(fù)操作，得到?SecLevel2、SecLevel3。SecLevel1、SecLevel2、SecLevel3分別對應(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)加載，選擇：啟用情形。添加條件，第一個(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對應(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)擊：新建交互，選擇：單擊時(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，選擇事件：單擊時(shí)，點(diǎn)擊：啟用情形，點(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對應(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ù)覽下效果。