教大家使用Axure制作带清空按钮的Select选择器

 时间:2024-10-14 02:11:50

1、打开Axure原型工具,今天教大家使用Axure制作带清空按钮的Select选择器,如下图所示。

教大家使用Axure制作带清空按钮的Select选择器

2、首先从元件库中将需要的元件拖入到正文当中,如下图所示。

教大家使用Axure制作带清空按钮的Select选择器

3、然后我们修改元件的大小及样式,做一个下拉框的效果,同时我们把两个图标放到动态面板中,如下图所示。

教大家使用Axure制作带清空按钮的Select选择器

4、然后我们再制作下拉菜单的值,并将这些值转换为动态面板,如下图所示。

教大家使用Axure制作带清空按钮的Select选择器教大家使用Axure制作带清空按钮的Select选择器

5、下面开始给每个元件加交互事件了,首先是下拉框的交互事件,如下图所示。

教大家使用Axure制作带清空按钮的Select选择器

6、然后是下拉值动态面板的交互事件,如下图所示。

教大家使用Axure制作带清空按钮的Select选择器

7、然后我们需要给下拉值的交互事件进行设置,如下图所示。

教大家使用Axure制作带清空按钮的Select选择器

8、最重要的步骤来了,就是选中的值,怎么样清空呢,这里不需要给删除图标加入交互事件,如下图所示。

教大家使用Axure制作带清空按钮的Select选择器

9、好了,所有工作准备完成,F5预览看一下效果,如下图所示。

教大家使用Axure制作带清空按钮的Select选择器
  • Axure如何制作带提示信息的输入框
  • axure怎么创建多个下拉选择项
  • Axure制作:倒计时(获取验证码案例)
  • Axure实现中继器的筛选功能
  • Axure 7.0模拟QQ登录效果
  • 热门搜索
    脸上祛斑方法 炸肉丸子的家常做法 河蚌怎么做 jlzz大全奶水太多 魔兽世界坐骑掉落大全 制作蛋糕的方法和材料 炒米粉怎么做好吃 斑是怎么形成的 辣子鸡的家常做法 调查方法