Axure 7.0清空输入框效果

本文中介绍这种带清空键的搜索框的设计思路和制作方法，供大家参考。
我们先来分析一下这种搜索框的交互逻辑。搜索框在获得和失去焦点时，清空键都将被隐藏；在搜索框中输入文字时，清空键将被显示，点击清空键，搜索框中文字被清空。

第一步：设置Text Field控件和Image控件

从Widgets库中分别将Text Field控件和Image控件拖到工作区域，然后在Widget Properties面板里，分别将两个控件的标签命名为：Text Field_Search和Image_Clear。如下图所示：

第二步：设置清空键的三种交互状态

双击Image_Clear控件，添加灰色图片作为清空键的默认状态，右键点击Image_Clear控件，在列表中分别选择Edit Image中的Edit Rollover Image和Edit Mouse Down Image，通在打开的设置对话框中，添加红色图片和黑色图片分别作为清空键的悬停状态和鼠标按下状态后进行保存。如下图所示：

第三步：设置“点击清空键，搜索框中文字被清空”的交互行为

选中Image_Clear，在Widget Properties面板里，双击OnClick，打开Case Editor对话框之后，添加Set Variable/Widgets value(s)行为，然后点击Open Set Value Editor打开行为配置对话框，进行如下图所示的设置：

完成上面后不要退出Case Editor对话框，这里还需要添加Set Focus to Widget行为，并在Configure Actions中勾选Text Field_Search(Text Field)后进行保存。如下图所示：

PS: 为什么在文字被清空后要将焦点给到搜索框，感兴趣的朋友可以去思考一下

第四步：将Image_Clear控件转换成Dynamic Panel，并将其状态设置为隐藏

右键点击Image_Clear控件，在列表中选择Convert中的Convert to Dynamic Panel将其转换为动态面板，并在Widget Properties面板里，将其命名为Dynamic Panel_Clear，然后右键点击Dynamic Panel_ClearKey在Edit Dynamic Panel中选择Set Hidden。如下图所示：

第五步：设置“在搜索框中输入文本时，清空键将被显示”的交互行为

选中Text Field_Search，在Widget Properties面板里，双击OnKeyUp，打开Case Editor对话框之后，完成添加Show Panel行为，并在Configure Actions中勾选Dynamic Panel_ClearKey(ClearKey)并进行保存。如下图所示：

第六步：设置“搜索框在获得和失去焦点时，清空键都将被隐藏”的交互行为

（两者在设计和操作步骤上极其相似，这里只介绍搜索框获得焦点时的操作）

选中Text Field_Search，在Widget Properties面板里，双击OnFocus，打开Case Editor对话框之后，点击Add Condition进入条件创建对话框，按照下图所示进行设置并保存：

然后在Case Editor对话框中完成添加Hidden Panel行为，并在Configure Actions中勾选Dynamic Panel_ClearKey(Dynamic Panel)并进行保存。如下图所示：

到这里，带清空键的搜索框就制作好了。

转自新浪博客