Axure8使用技巧

AxureRP8使用技巧

定制搜索输入框

制作搜索框/输入框的下拉列表跟随提示，分三种形式。

案例一：搜索框/输入框一

案例二：搜索框/输入框二

案例三：搜索框/输入框三

一为基础，案例三以案例二为基础。

1、通过中继器的数据管理功能，在中继器显示前添加筛选动作，然后加载筛选出的各项。

注：在数据集添加数据列“SearchOption”。

2、在中继器数据集页面，添加数据列和数据。

3、在中继器数据集页面，在矩形框中，设置或增加显示数据列的元件（如文本标签、矩形、图片等）及名称。

4、回到主页面，添加中继器的交互事件，在“每项加载时”事件中，针对各数据列对应的元件设置文字显示。

5、在文本输入框元件为中继器“添加筛选”：

选中文本输入框，选择交互事件“文本改变时”，在添加动作中选择中继器的“添加筛选”，然后在配置动作中选择中继器，设置动作条件。

最后编辑条件，也就是中继器的筛选要求，将符合条件的数据项选出。使用字符串函数indexOf判断中继器的数据项是否包含文本框中的数据，如

[[Item.SearchOption.indexOf(LVAR1)>=0]]其中LVAR1是为文本输入框的文字设置

的局部变量。

1.搜索框/输入框一

方法与步骤：

1、从元件库拖入【文本框】和【中继器】，将【中继器】设置为“隐藏”。

2、选中【中继器】，在属性中设置名称（Name）为“RPL_SearchOption“。如下图。

说明：此处【中继器】中的数据为步骤3中设置的数据集，【中继器】初始状态为空。

3、双击【中继器】，进入中继器配置页面。在“数据集”中将第1列改名为“SearchOption”，并添加数据行。如下图。设置完成后，可以调整矩形框长、宽，返回原页面查看效果和调整元件位置。

4、在中继器配置页面选中矩形，选择样式，去掉矩形边框的上线。如下图。注：此处在Axure7.0中是在属性中选择形状（开口向上的矩形框）。

5、在中继器配置页面拖入【水平线】，调整位置及长度，使其位于矩形框的上部，长度等于矩形框长度。

在选中水平线的状态下，为水平线在属性名称中命名为“HL_TopBorder”，并勾选“隐藏”属性。

6、返回到原页面，调整文本框和中继器的大小和位置。

7、在原页面选择中继器，在属性中添加“交互”事件。（此中继器交互事件为系统默认自动创建，如果系统没有自动创建，则按照以下步骤进行添加）

选取“每项加载时”：

双击或点击“+”，弹出：

在“添加动作”中选择“设置文本”，在配置动作中选择矩形框，然后点击“fx”，弹出“编辑文本”窗口，点击“插入变量或函数…”，在下拉列表中选取Item.SearchOption。

8、继续添加【中继器】“每项加载时”交互事件，双击或点击“+”按钮

点击“添加条件”：

在“条件设立”中选择“值”、第一个fx为“Item.isFirst”，第二个fx中输入“true”。

确定后，回到动作配置，“添加动作”中选择“显示”，“配置动作”中勾选水平线。

在“交互”事件中，右击刚才添加的事件，切换为

至此，得到中继器的交互事件如下：

9、为文本框添加交互事件。添加事件的方法同上。

添加事件的基本过程是：选择事件>添加条件>添加动作>配置动作。

文本框的交互事件如下：

Case1：如果文本框不为空：

在文本框的“交互”事件中添加中继器的“筛选”动作；

在配置动作中，为文本框添加局部变量；

插入函数：如果Item.SearchOption.indexOf(LVAR1)>=0则显示中继器Case2：如果文本框为空，则隐藏中继器。

2.搜索框/输入框二

在“搜索框/输入框一”的基础上，修改中继器的数据集和矩形框中显示的内容。

1、中继器数据集：

增加一列“SummaryLine”：

2、矩形框：

在矩形框内添加3个元件：一个图片、两个文本标签（名称分别为：LBL_Name、LBL_SummaryLine）

3、修改中继器的交互事件：让文本标签分别对应中继器数据集中的列。

3.搜索框/输入框三

在“搜索框/输入框二”的基础上，修改中继器的数据集和矩形框中显示的内容。

1、中继器数据集增加一列：

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（动态面板中矩形框的高度）。否则，如果是最后一项，则将全局变量ItemOffset置0。

5、更新文本框的交互事件：

在显示中继器的事件中添加条件：

[[Item.SearchOption.indexOf(LVAR1)>=0||Item.ItemType=='category']]