Axure8使用技巧

1、Axure RP8使用技巧定制搜索輸入框制作搜索框/輸入框的下拉列表跟隨提示，分三種形式。案例一：搜索框/輸入框一案例二：搜索框/輸入框二案例三：搜索框/輸入框三元件：文本框、中繼器、水平線、文本標(biāo)簽、圖片、動(dòng)態(tài)面板。分布如下：案例元件文本框中繼器水平線文本標(biāo)簽圖片動(dòng)態(tài)面板案例一案例二案例三原理：主要是中繼器的使用、字符串函數(shù)的使用、動(dòng)態(tài)面板的使用。其中案例二以案例一為基礎(chǔ)，案例三以案例二為基礎(chǔ)。1、通過中繼器的數(shù)據(jù)管理功能，在中繼器顯示前添加篩選動(dòng)作，然后加載篩選出的各項(xiàng)。注：在數(shù)據(jù)集添加數(shù)據(jù)列“SearchOption”。2、在中繼器數(shù)據(jù)集頁(yè)面，添加數(shù)據(jù)列和數(shù)據(jù)。3、在中繼器數(shù)據(jù)集頁(yè)面，在

2、矩形框中，設(shè)置或增加顯示數(shù)據(jù)列的元件（如文本標(biāo)簽、矩形、圖片等）及名稱。4、回到主頁(yè)面，添加中繼器的交互事件，在“每項(xiàng)加載時(shí)”事件中，針對(duì)各數(shù)據(jù)列對(duì)應(yīng)的元件設(shè)置文字顯示。5、在文本輸入框元件為中繼器“添加篩選”：選中文本輸入框，選擇交互事件“文本改變時(shí)”，在添加動(dòng)作中選擇中繼器的“添加篩選”，然后在配置動(dòng)作中選擇中繼器，設(shè)置動(dòng)作條件。最后編輯條件，也就是中繼器的篩選要求，將符合條件的數(shù)據(jù)項(xiàng)選出。使用字符串函數(shù)indexOf判斷中繼器的數(shù)據(jù)項(xiàng)是否包含文本框中的數(shù)據(jù)，如Item.SearchOption.indexOf(LVAR1)=0 其中LVAR1是為文本輸入框的文字設(shè)置的局部變量。1. 搜索

3、框/輸入框一方法與步驟：1、從元件庫(kù)拖入【文本框】和【中繼器】，將【中繼器】設(shè)置為“隱藏”。2、選中【中繼器】，在屬性中設(shè)置名稱（Name）為“RPL_SearchOption“。如下圖。說明：此處【中繼器】中的數(shù)據(jù)為步驟3中設(shè)置的數(shù)據(jù)集，【中繼器】初始狀態(tài)為空。3、雙擊【中繼器】，進(jìn)入中繼器配置頁(yè)面。在“數(shù)據(jù)集”中將第1列改名為“SearchOption”，并添加數(shù)據(jù)行。如下圖。設(shè)置完成后，可以調(diào)整矩形框長(zhǎng)、寬，返回原頁(yè)面查看效果和調(diào)整元件位置。4、在中繼器配置頁(yè)面選中矩形，選擇樣式，去掉矩形邊框的上線。如下圖。注：此處在Axure7.0中是在屬性中選擇形狀（開口向上的矩形框）。5、在中繼器

4、配置頁(yè)面拖入【水平線】，調(diào)整位置及長(zhǎng)度，使其位于矩形框的上部，長(zhǎng)度等于矩形框長(zhǎng)度。在選中水平線的狀態(tài)下，為水平線在屬性名稱中命名為“HL_TopBorder”，并勾選“隱藏”屬性。6、返回到原頁(yè)面，調(diào)整文本框和中繼器的大小和位置。7、在原頁(yè)面選擇中繼器，在屬性中添加“交互”事件。（此中繼器交互事件為系統(tǒng)默認(rèn)自動(dòng)創(chuàng)建，如果系統(tǒng)沒有自動(dòng)創(chuàng)建，則按照以下步驟進(jìn)行添加）選取“每項(xiàng)加載時(shí)”：雙擊或點(diǎn)擊“+”，彈出：在“添加動(dòng)作”中選擇“設(shè)置文本”，在配置動(dòng)作中選擇矩形框，然后點(diǎn)擊“fx”，彈出“編輯文本”窗口，點(diǎn)擊“插入變量或函數(shù)”，在下拉列表中選取Item.SearchOption。8、繼續(xù)添加【中繼

5、器】“每項(xiàng)加載時(shí)”交互事件，雙擊或點(diǎn)擊“+”按鈕點(diǎn)擊“添加條件”：在“條件設(shè)立”中選擇“值”、第一個(gè)fx為“Item.isFirst”，第二個(gè)fx中輸入“true”。確定后，回到動(dòng)作配置，“添加動(dòng)作”中選擇“顯示”，“配置動(dòng)作”中勾選水平線。在“交互”事件中，右擊剛才添加的事件，切換為至此，得到中繼器的交互事件如下：9、為文本框添加交互事件。添加事件的方法同上。添加事件的基本過程是：選擇事件添加條件添加動(dòng)作配置動(dòng)作。文本框的交互事件如下：Case1：如果文本框不為空：在文本框的“交互”事件中添加中繼器的“篩選”動(dòng)作；在配置動(dòng)作中，為文本框添加局部變量；插入函數(shù)：如果Item.SearchOpt

6、ion.indexOf(LVAR1)=0則顯示中繼器Case2：如果文本框?yàn)榭?，則隱藏中繼器。2. 搜索框/輸入框二在“搜索框/輸入框一”的基礎(chǔ)上，修改中繼器的數(shù)據(jù)集和矩形框中顯示的內(nèi)容。1、中繼器數(shù)據(jù)集：增加一列“SummaryLine”：2、矩形框：在矩形框內(nèi)添加3個(gè)元件：一個(gè)圖片、兩個(gè)文本標(biāo)簽（名稱分別為：LBL_Name、LBL_SummaryLine）3、修改中繼器的交互事件：讓文本標(biāo)簽分別對(duì)應(yīng)中繼器數(shù)據(jù)集中的列。3. 搜索框/輸入框三在“搜索框/輸入框二”的基礎(chǔ)上，修改中繼器的數(shù)據(jù)集和矩形框中顯示的內(nèi)容。1、中繼器數(shù)據(jù)集增加一列：2、動(dòng)態(tài)面板在中繼器配置頁(yè)面，選取矩形框、圖片、兩個(gè)

7、文本標(biāo)簽等4個(gè)元件（除去最上面的水平線外），在右擊菜單中選擇“轉(zhuǎn)換為動(dòng)態(tài)面板”，即可生成動(dòng)態(tài)面板，并命名為DP_List_Items。將當(dāng)前面板的狀態(tài)改名為Result_Item，在選中時(shí)右擊顯示右鍵菜單，選擇“復(fù)制狀態(tài)”，將新生成的動(dòng)態(tài)面板的狀態(tài)改名為Category_Item。說明：使用動(dòng)態(tài)面板對(duì)中繼器數(shù)據(jù)集顯示的兩種情況進(jìn)行分別設(shè)置，即對(duì)應(yīng)動(dòng)態(tài)面板的兩個(gè)狀態(tài)，并調(diào)整數(shù)據(jù)集的數(shù)據(jù)項(xiàng)（ItemType為category）的高度。打開動(dòng)態(tài)面板的狀態(tài)Category_Item進(jìn)行修改，用于展示分組標(biāo)題：保留矩形和1個(gè)文本標(biāo)簽，刪除其他元件，調(diào)整位置、大小及字體。將文本標(biāo)簽命名為L(zhǎng)BL_CategoryName。3、設(shè)置全局變量ItemOffset。操作菜單：項(xiàng)目全局變量4、修改中繼器事件回到原頁(yè)面，選中中繼器，更新其交互事件。其中，設(shè)置文本標(biāo)簽LBL_CategoryName的文字；移動(dòng)動(dòng)態(tài)面板：x:0,y:ItemOffset另外，在“每項(xiàng)加載時(shí)”對(duì)ItemType進(jìn)行判斷。如果ItemType為category，則設(shè)置動(dòng)態(tài)面板的狀態(tài)為Category_Item，并將全局變量ItemOffset減去30（動(dòng)態(tài)面板中矩形