Axure8使用技巧

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

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

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

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

5、加【中繼器】“每項加載時”交互事件，雙擊或點擊“+”按鈕點擊“添加條件”：在“條件設立”中選擇“值”、第一個fx為“Item.isFirst”，第二個fx中輸入“true”。確定后，回到動作配置，“添加動作”中選擇“顯示”，“配置動作”中勾選水平線。在“交互”事件中，右擊剛才添加的事件，切換為<if>至此，得到中繼器的交互事件如下：9、為文本框添加交互事件。添加事件的方法同上。添加事件的基本過程是：選擇事件>添加條件>添加動作>配置動作。文本框的交互事件如下：Case1：如果文本框不為空：在文本框的“交互”事件中添加中繼器的“篩選”動作；在配置動作中，為文本框添加

6、局部變量；插入函數：如果Item.SearchOption.indexOf(LVAR1)>=0則顯示中繼器Case2：如果文本框為空，則隱藏中繼器。2. 搜索框/輸入框二在“搜索框/輸入框一”的基礎上，修改中繼器的數據集和矩形框中顯示的內容。1、中繼器數據集：增加一列“SummaryLine”：2、矩形框：在矩形框內添加3個元件：一個圖片、兩個文本標簽（名稱分別為：LBL_Name、LBL_SummaryLine）3、修改中繼器的交互事件：讓文本標簽分別對應中繼器數據集中的列。3. 搜索框/輸入框三在“搜索框/輸入框二”的基礎上，修改中繼器的數據集和矩形框中顯示的內容。1、中繼器數據集增

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