猿型库：Axure小练习之自定义下拉框

下拉列表框是很常用的元件，Axure元件库也提供了下拉列表框，但是Axure提供的下拉框不够美观，这里我们发扬造轮子的精神，自己定义下拉框。

我们先看一下制作好的省份选择的下拉框：

 

效果预览：http://www.axurestudy.cn/pr/index.html

https://pan.baidu.com/s/1lCILNe89kdRGbtfzDwYvpg

提取码：t7pf

 

【需求分析】

 

1、下拉列表分成初始状态、初始状态下显示请选择字样，下拉箭头朝下；

 

2、当鼠标点击的时候，下拉框的的边框变成蓝色，下拉箭头朝上，并且展示下拉列表数据项；

 

3、当鼠标在下拉列表项上移动的时候，选项变成蓝色；

 

4、单点击其中一个数据项的时候，下拉框收起，在下拉框里面显示选中项；

 

【原型设计】

1、现在画布拖入一个矩形框province，并且在矩形框里面输入Font AweSome图标，字符靠右对齐，如果不会使用Font AweSome的同学，请查看如何使用字体图标；

    

    2、在矩形框里面拖入一个输入框input，边框设置为0，录入文字“ 请选择 ”；

 

3、拖入一个中继器，在数据源里面录入省份名称数据；

 

 

4、点击右键，把中继器转换为动态面板，设置动态面板高度为合适的高度，并且设置动态面板为垂直方面滚动；

5、设置动态面板为隐藏状态；

至此，自定义下拉列表的原型已经制作完成，现在的效果如下所示：

 

 

【交互设计】

1、设置矩形框province的交互样式，当矩形框为选中的时候，设置边框颜色为蓝色；

 

 

2、输入框PInput和矩形框Province组合，设置该组合的点击事件，当鼠标单击的时候，设置矩形框Province在选中和取消选中之间进行切换；

 

3、设置矩形框Province的选中事件，当Province被选中，设置切换为，并且展示动态面板；

    当Province取消选中的时候，设置为 ，并且隐藏动态面板；

 

4、设置中继器的记录的交互状态，当鼠标悬浮的时候，修改矩形框的填充颜色；

 

5、当选中中继器的一个记录的时候，设置输入框的值为选中值，并且隐藏下拉列表；

 

到了这里，自定义下拉列表框就制作好了，同学们赶紧去试试吧。

---

 

回复【入门】 ，获取零基础Axure快速入门视频教程；

回复【安装】 ，获取安装程序；

回复【练习】 ，获取练习案例；

回复【高保真】，获取高保真原型；

关注微信公众号【猿型库】，获取更多优质Axure资源；