搜索框是一个常用的控件,做个简单的搜索框控件,方便拖拉出来使用,呵呵……效果如下:
工具/原料
AxureRP8
方法/步骤
1、新建1个文本框、1个矩形、2个图标式样如下图所示:
2、设置“查询”图标的属性(根据自传陔侔抒己需求,可自行设定):1.尺寸:20*202.不透明度:40%如下图所示:
3、设置“X”图标的属性(根据自己需求,可自行设定):1.尺寸:15*152.不透明度:40%如下图所示:
4、设置文本框的“提示文字“内容为“搜索”,并设置为”隐藏边框“如下图所示:
5、按下图的布局方式,组合成“搜索框”控件,呵呵……
6、以下就是针对“文本框”及“清除”图标的代码设置,完成交互效果,这个也很简单的……
7、设置“文本框“的”文本改变时“的交互动作:条件1---当”元件文字长度“不等于”0“这个选项时---
8、动作1---显示”清除”图标---
9、条件2---当”元件文字长度“等于”0“这个选项时---
10、动作2---隐藏”清除”图标---
11、“文本框”的所有动作如下图所示:
12、设置“清除“图标的交互动作:1.设置“文本框”的内容为“空”2.设置焦点在“文本框”
13、到这里就设置结束了,是不是很是简单……一切设置正确,效果就如下:
14、觉得不错,对你有帮助的话,请投个票,加个赞哦~