【剖析Axure】省市下拉关联选择的制作 获赏10金币 案例教程 基础教程

文新Wénxīn. 普通用户 10月前 1034

【剖析Axure】省市下拉关联选择制作


一、制作原理

【效果展示说明】

两个下拉列表,在第一个下拉列表中选择省,则在第二个下拉列表中显示该省对应的市以供选择。

Axure原理说明】

第一个下拉列表为普通的下拉列表,第二个下拉列表要利用动态面板,动态面板的每个面板状态制作为一个省的市级下拉列表项。一级下拉有几个省,动态面板就有几个面板,同时,这里有个技巧:面板的名字与一级菜单下拉选项的值相同,方便做关联交互。(下拉列表元件也可以自己通过矩形元件和动态面板设计出更个性化、更美观的下拉列表;使用中继器还可带搜索功能。下一课程讲解。)

二、制作过程

Step1:从元件库的表单元件中拖入一个下拉列表框元件到画布中;

Step2:对画布中的下拉列表框元件设置一下样式属性,如:位置、宽高、字体大小、字体颜色等;

Step3:双击该下拉列表框,打开列表选项值设置对话框。通过【编辑多项】按钮可快速设置多个选项。

(附:部分省市对照内容)

第一个下拉列表完成,接下来制作第二个下拉列表。

Step4:按住CtrlShift键,然后鼠标选中刚刚制作好的下拉列表框往右拖动,复制一个一模一样的下拉列表。放置合适的位置。

Step5:右击第二个下拉列表框,将它转为动态面板。

Step6:双击动态面板,进入动态面板状态设置页面,并修改面板状态名字。

Step7:在面板状态中选中【河北】状态,然后点重复按钮。在第一个下拉中有几个选项,这里就复制出几个。

Step8:对照第一个下拉列表框的选项值,将动态面板状态的名称重命名为与他一致(但是顺序不重要),这步是一个关键细节。

Step9:分别进入动态面板中的每个状态,设置该省的市级选项。(可通过点【编辑全部状态】按钮,打开全部状态页面,然后一一设置即可。)

基础工作完成,接下来是交互的设置。对第一个下拉项设置选项改变时即可。

Step10:选中第一个下拉列表框,右侧属性面板中双击【选项改变时】,为下拉列表的选项改变时做动作。当选项改变时设置面板状态,状态通过变量值来控制。


Step11:为选择的状态通过变量值控制,该值为第一个下拉列表被选中的选项值。因为选项值与动态面板状态的名称有对应关系,因此第一个下拉列表选中的哪个值,动态面板就设置显示这个值的状态。但是要记住:这两个值是不一样的含义,而只是因为两个值相同。如果选中的选项值在面板中没有以这个值为名称的状态,是没有关联效果的。

整个制作过程到此完成,可F5预览一下。

三、总结

这个制作的关键就在于第八步,否则在做交互的时候就要判断,下拉选择了哪个项动态面板该设置哪个状态,有多少下拉项就要判断多少次,设置多少次面板状态,很费事。

 

个人经验,不足之处请多多指点!!

Good Good Study Day Day Up

 


axure商城
上传的附件:
快速回复
打赏排行 用户名 打赏金额
第1名 沈十三 10金币
最新回复 (20)
  • beAst 普通用户 2天前
    0 引用 21
    感谢楼主,太实用了
  • 陈同学 普通用户 3月前
    0 引用 20
    感谢分享
  • 馬小肆 普通用户 5月前
    0 引用 19
    谢谢分享
  • 肥肥_1586939352 普通用户 7月前
    0 引用 18
    谢谢
  • 970861228 普通用户 7月前
    0 引用 17
    谢谢
  • 江江江楼 普通用户 7月前
    0 引用 16
    谢谢分享~~
  • yaojing990 普通用户 7月前
    0 引用 15
    感谢楼主大佬分享
  • cuiwenjie 普通用户 7月前
    0 引用 14
    1
  • 奈斯ns2828 普通用户 7月前
    0 引用 13
    谢谢
  • 舒德怀 普通用户 8月前
    0 引用 12
    谢谢
  • 沈十三 管理员 8月前
    0 引用 11
    感谢分享,已获得10金币奖励!
  • 暖暖_1594784296 普通用户 8月前
    0 引用 10
    谢谢分享
  • 白凯军_1594690588 普通用户 9月前
    0 引用 9

    谢谢分享

  • 波_1594623172 普通用户 9月前
    0 引用 8
    谢谢分享
  • 小程怪难瘦 普通用户 9月前
    0 引用 7
    666
  • ²º²º王星 普通用户 9月前
    0 引用 6
    太感谢了。。正在鼓捣这个
  • wxjz1 普通用户 9月前
    0 引用 5
    谢谢
  • Mr.Nobody 普通用户 9月前
    0 引用 4
    3Q
  • ssy2140 普通用户 10月前
    0 引用 3
    学习了
  • 张一 普通用户 10月前
    0 引用 2
    谢谢
返回
axure商城