Axure8使用技巧

1、Axure RP8使用技巧定制搜索输入框制作搜索框/输入框的下拉列表跟随提示，分三种形式。案例一：搜索框/输入框一案例二：搜索框/输入框二案例三：搜索框/输入框三元件：文本框、中继器、水平线、文本标签、图片、动态面板。分布如下：案例元件文本框中继器水平线文本标签图片动态面板案例一案例二案例三原理：主要是中继器的使用、字符串函数的使用、动态面板的使用。其中案例二以案例一为基础，案例三以案例二为基础。1、通过中继器的数据管理功能，在中继器显示前添加筛选动作，然后加载筛选出的各项。注：在数据集添加数据列“SearchOption”。2、在中继器数据集页面，添加数据列和数据。3、在中继器数据集页面，在

2、矩形框中，设置或增加显示数据列的元件（如文本标签、矩形、图片等）及名称。4、回到主页面，添加中继器的交互事件，在“每项加载时”事件中，针对各数据列对应的元件设置文字显示。5、在文本输入框元件为中继器“添加筛选”：选中文本输入框，选择交互事件“文本改变时”，在添加动作中选择中继器的“添加筛选”，然后在配置动作中选择中继器，设置动作条件。最后编辑条件，也就是中继器的筛选要求，将符合条件的数据项选出。使用字符串函数indexOf判断中继器的数据项是否包含文本框中的数据，如Item.SearchOption.indexOf(LVAR1)>=0 其中LVAR1是为文本输入框的文字设置的局部变量。1

3、. 搜索框/输入框一方法与步骤：1、从元件库拖入【文本框】和【中继器】，将【中继器】设置为“隐藏”。2、选中【中继器】，在属性中设置名称（Name）为“RPL_SearchOption“。如下图。说明：此处【中继器】中的数据为步骤3中设置的数据集，【中继器】初始状态为空。3、双击【中继器】，进入中继器配置页面。在“数据集”中将第1列改名为“SearchOption”，并添加数据行。如下图。设置完成后，可以调整矩形框长、宽，返回原页面查看效果和调整元件位置。4、在中继器配置页面选中矩形，选择样式，去掉矩形边框的上线。如下图。注：此处在Axure7.0中是在属性中选择形状（开口向上的矩形框）。5、

4、在中继器配置页面拖入【水平线】，调整位置及长度，使其位于矩形框的上部，长度等于矩形框长度。在选中水平线的状态下，为水平线在属性名称中命名为“HL_TopBorder”，并勾选“隐藏”属性。6、返回到原页面，调整文本框和中继器的大小和位置。7、在原页面选择中继器，在属性中添加“交互”事件。（此中继器交互事件为系统默认自动创建，如果系统没有自动创建，则按照以下步骤进行添加）选取“每项加载时”：双击或点击“+”，弹出：在“添加动作”中选择“设置文本”，在配置动作中选择矩形框，然后点击“fx”，弹出“编辑文本”窗口，点击“插入变量或函数”，在下拉列表中选取Item.SearchOption。8、继续添

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、动态面板在中继器配置页面，选取矩形框、图片、两个文本标签等4个元件（除去最上面的水平线外），在右击菜单中选择“转换为动态面板”，即可生成动态面板，并命名为DP_List_Items。将当前面板的状态改名为Result_Item，在选中时右击显示右键菜单，选择“复制状态”，将新生成的动态面板的状态改名为Category_Item。说明：使用动态面板对中继器数据集显示的两种情况进行分别设置，即对应动态面板的两个状态，并调整数据集的数据项（ItemType为category）的高度。打开动态面板的状态Category_Item进行修改，用于展示分组标题：保留矩形和1个文本标签，删除其他元件，调整位置、大小及字体。将文本标签命名为LBL_CategoryName。3、设置全局变量ItemOffset。操作菜单：项目>全局变量4、修改中继器事件回到原页面，选中中继器，更新其交互事件。其中，设置文本标签LBL_CategoryName的文字；移动动态面板：x:0,y:ItemOffset另外，在“每项加载时”对ItemType进行判断。如果ItemType为category，则设置动态面板的状态为Category_Item，并将全局变量ItemOffset减去30（动态面板中矩形框的高度）。否则，如果