Axure8使用技巧合编.docxVIP

Axure RP8使用技巧 定制搜索输入框 制作搜索框/输入框的下拉列表跟随提示，分三种形式。 案例一：搜索框/输入框一 案例二：搜索框/输入框二 案例三：搜索框/输入框三 元件：文本框、中继器、水平线、文本标签、图片、动态面板。分布如下： 案例\元件文本框中继器水平线文本标签图片动态面板案例一√√√案例二√√√√√案例三√√√√√√原理：主要是中继器的使用、字符串函数的使用、动态面板的使用。其中案例二以案例一为基础，案例三以案例二为基础。 1、通过中继器的数据管理功能，在中继器显示前添加筛选动作，然后加载筛选出的各项。 注：在数据集添加数据列“SearchOption”。 2、在中继器数据集页面，添加数据列和数据。 3、在中继器数据集页面，在矩形框中，设置或增加显示数据列的元件（如文本标签、矩形、图片等）及名称。 4、回到主页面，添加中继器的交互事件，在“每项加载时”事件中，针对各数据列对应的元件设置文字显示。 5、在文本输入框元件为中继器“添加筛选”： 选中文本输入框，选择交互事件“文本改变时”，在添加动作中选择中继器的“添加筛选”，然后在配置动作中选择中继器，设置动作条件。 最后编辑条件，也就是中继器的筛选要求，将符合条件的数据项选出。使用字符串函数indexOf判断中继器的数据项是否包含文本框中的数据，如 [[Item.SearchOption.indexOf(LVAR1)=0]] 其中LVAR1是为文本输入框的文字设置的局部变量。 搜索框/输入框一 方法与步骤： 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”。 确定后，回到动作配置，“添加动作”中选择“显示”，“配置动作”中勾选水平线。 在“交互”事件中，右击刚才添加的事件，切换为if 至此，得到中继器的交互事件如下： 9、为文本框添加交互事件。添加事件的方法同上。 添加事件的基本过程是：选择事件添加条件添加动作配置动作。 文本框的交互事件如下： Case1：如果文本框不为空： 在文本框的“交互”事件中添加中继器的“筛选”动作； 在配置动作中，为文本框添加局部变量； 插入函数：如果Item.SearchOption.indexOf(LVAR1)=0则显示中继器 Case2：如果文本框为空，则隐藏中继器。 搜索框/输入框二 在“搜索框/输入框一”的基础上，修改中继器的数据集和矩形框中显示的内容。 1、中继器数据集： 增加一列“SummaryLine”： 2、矩形框： 在矩形框内添加3个元件：一个图片、两个文本标签（名称分别为：LBL_Name、LBL_SummaryLine） 3、修改中继器的交互事件：让文本标签分别对应中继器数据集中的列。 搜索框/输入框三 在“搜索框/输入框二”的基础上，修改中继器的数据集和矩形框中显示的内容。 1、中继器数据集增加一列： 2、动态面板 在中继器配置页面，选取矩形框、图片、两个文本标签等4个元件（除去最上面的水平线外），在右击菜单中选择“转换为动态面板”，即可生成动态面板，并命名为DP_List_Items??? 将当前面板的状态改名为Result_Item，在选中时右击