养生 装修 购物 美食 感冒 便秘 营销 加盟 小吃 火锅 管理 创业 搭配 减肥 培训 旅游

Axure制作:简易的搜索框案例

时间:2024-11-12 10:30:01

搜索框是一个常用的控件,做个简单的搜索框控件,方便拖拉出来使用,呵呵……效果如下:

Axure制作:简易的搜索框案例

工具/原料

AxureRP8

方法/步骤

1、新建1个文本框、1个矩形、2个图标式样如下图所示:

Axure制作:简易的搜索框案例

2、设置“查询”图标的属性(根据自传陔侔抒己需求,可自行设定):1.尺寸:20*202.不透明度:40%如下图所示:

Axure制作:简易的搜索框案例

3、设置“X”图标的属性(根据自己需求,可自行设定):1.尺寸:15*152.不透明度:40%如下图所示:

Axure制作:简易的搜索框案例

4、设置文本框的“提示文字“内容为“搜索”,并设置为”隐藏边框“如下图所示:

Axure制作:简易的搜索框案例

5、按下图的布局方式,组合成“搜索框”控件,呵呵……

Axure制作:简易的搜索框案例

6、以下就是针对“文本框”及“清除”图标的代码设置,完成交互效果,这个也很简单的……

7、设置“文本框“的”文本改变时“的交互动作:条件1---当”元件文字长度“不等于”0“这个选项时---

Axure制作:简易的搜索框案例

8、动作1---显示”清除”图标---

Axure制作:简易的搜索框案例

9、条件2---当”元件文字长度“等于”0“这个选项时---

10、动作2---隐藏”清除”图标---

Axure制作:简易的搜索框案例

11、“文本框”的所有动作如下图所示:

Axure制作:简易的搜索框案例

12、设置“清除“图标的交互动作:1.设置“文本框”的内容为“空”2.设置焦点在“文本框”

Axure制作:简易的搜索框案例

13、到这里就设置结束了,是不是很是简单……一切设置正确,效果就如下:

Axure制作:简易的搜索框案例

14、觉得不错,对你有帮助的话,请投个票,加个赞哦~

© 一点知识