快捷搜索:

省市县三级联动选择

日期:2019-11-27编辑作者:www.8455.com

原标题:Axure教程:省市县三级联动选择(全国省市区数据)

一、辅助线

省市县三级联动选择功能在互联网平台应用非常广泛,很多人在做产品设计时,不知道怎么实现三级联动效果,或者只能简单实现一两个固定城市的三级联动效果。如果要实现全国城市的三级联动选择呢?作者将通过这篇案列分享,教大家使用Axure制作实现“全国城市省市县三级联动选择效果”。

  • 全局辅助线
    作用于站点中所有页面,包括新建页面。
  • 页面辅助线
    只作用于当前页面
  • 自适应视图辅助线
    只显示在用户设置的自适应视图中
  • 打印辅助线
    用于观察页面效果,正确打印页面
    注:1mm=2.8px

图片 1

二、对齐

实现效果

左对齐 Ctrl Alt L
右对齐Ctrl Alt R
居中对齐Ctrl Alt C
顶部对齐Ctrl Alt T
底部对齐Ctrl Alt B
上下居中Ctrl Alt M
进行对齐操作时会以先选中的元件为基准来对齐

图片 2

三、存储

  1. 可以任意选择全国所有省份、选择该省份对应的城市、选择该城市对应的县区;
  2. 未选择省份时,点击“城市下拉选择”,提示“请先选择省份”;
  3. 未选择城市时,点击“县区下拉选择”,提示“请先选择城市”;
  4. 切换选中省份时,重置城市及县区选项;
  5. 切换选中城市时,重置县区选项
  6. 当前选项处于下拉框选项状态时,点击其他选择框,隐藏当前选项下拉框;
  7. 下拉选项框展示时,下拉箭头向上,下拉选项框隐藏时,下拉箭头向上;
  8. 动态显示三级行政区移入状态、选中状态、取消选中状态。
  • RP格式
    单一用户模式
  • RPPRJ
    团队协作的项目文件
    签入控制
    可以取消签出
    版本控制和恢复到历史版本
  • RPLIB
    自定义元件库模式

原理分析

四、组合对象与锁定对象

(1)利用中继器的数据存储功能,用三个中继器分别存放省份、城市、区域数据;

Ctrl G 可以选中多个元器件,然后把它们组合在一起,可以一起完成移动、缩放、隐藏、排列、锁定和添加样式。

  • 省份中继器只需1列,用来存放全国所有省份数据;
  • 城市中继器需要2列,用来存放省份数据及城市数据(注意省份名称要和省份中继器的省份名称一致);
  • 县区中继器需要2列,用来存放城市数据及县区数据(注意城市名称要和城市中继器里城市名称一致);

Ctrl K 锁定对象位置

(2)利用“省份下拉”元件的单击事件触发省份下拉选项的展示与隐藏;

五、注意点

(3)利用临时变量将选中的省份名称赋值给省份输入框,从而显示当前已选省份;

-文本框不可以设置圆角属性(可以添加矩形框与文本框,再隐藏文本框边框属性即可)

(4)利用“省份输入框”元件的文本改变事件,触发城市文本输入框的显示及城市下拉选项框的内容;

-点击文字后输入框获取焦点:为文字添加事件即可
条件事件:直接为用例添加条件即可

(5)利用“城市下拉”元件的选中状态事件,判断省份是否选中,未选中城市则给出“请先选择省份!”的错误提示;

-条件判断if else
在设置事件时先设置条件判断然后再设置事件。

(6)城市、区域涉及的各元件设置方式同“2、3、4、5”步骤。

-事件中是先选中再禁用,先启用在选中

元件准备

六、动态面板

图片 3

特点1、动态面板是一个多空间的元件容器,它是实际存在的(会占据空间)只是看不见而已。默认显示第一个面板

  1. 省份输入框背景(省份背景),放在输入框底部
  2. 省份输入框(省份显示),用于显示已选择的省份名称
  3. 省份下拉指示图标(省份选择),用于点击触发展示下拉选项,隐藏下拉选项
  4. 省份下拉组合选项(包括一个中继器sf,动态面板sfn,动态面板sfw),用于显示所有省份名字
  5. 城市输入框背景(城市背景),放在输入框底部
  6. 城市输入框(城市显示),用于显示已选择的城市名称
  7. 城市下拉指示图标(城市选择),用于点击触发展示下拉选项,隐藏下拉选项
  8. 城市下拉组合选项(包括一个中继器cs,动态面板csn,动态面板csw),用于显示所有城市名字
  9. 县区输入框背景(县区背景),放在输入框底部
  10. 县区输入框(县区文字),用于显示已选择的城市名称
  11. 县区下拉指示图标(县区选择),用于点击触发展示下拉选项,隐藏下拉选项
  12. 县区下拉组合选项(包括一个中继器xq,动态面板xqn,动态面板xqw),用于显示所有县区名字
  13. 操作提示组合元件(提示框),用于显示校验出错时的提示
  14. 背景,整个案例的演示背景,可要可不要

特点2、动态面板可以设置推动元件,进而不会与已显示元件重叠显示。
用于显示提示框

隐藏提示文件,重新布局元件后效果如下:

特点3、动态面板独有的事件有拖动、载入、状态改变、滚动

图片 4

特点4、可以通过设置“显示”和“设置动态面板状态”来显示我们想要显示的动态面板中页面。两者任选其一即可。

实现步骤 1. 准备省份数据及操作显示元件

内联框架

拖入一个中继器sf,给中继器的默认Column0列添加全国所有省份数据,要加上“请选择”数据

特点:
可以在框架内设置不同页面,并且如果页面大于框架大小,框架可以通过滚动条滚动显示;而动态面板只能显示固定区域的 内容
切换不同内部页面时通过链接到不同页面即可;而动态面板则是设置显示属性

图片 5

七、中继器

将中继器的数据通过每项加载时赋值给矩形,矩形显示的数据就是省份待选项数据

用于模块化的内容制作与显示。

图片 6

先添加中继器数据集,然后再设置中继器每项的模板样式,然后再将中继器中的数据添加到每一项中显示出来。

将中继器sf转换为动态面板sfn,动态面板的大小为220px*240px。设置动态面板的滚动条属性为“自动显示垂直滚动条”

图片 7

图片 8

设置方式

实用小技巧:将可滚动的动态面板sfn转换为动态面板sfw,动态面板的大小为200px*240px。设置动态面板的滚动条属性为“无”,从而可以实现滚动且隐藏滚动条的效果

添加行
通过设置事件,绑定数据,添加行即可。

图片 9

删除行
方法1、在模板上面直接删除:通过绑定事件来删除数据行。

准备三个元件,分别是:省份背景矩形放在最下面,省份显示文本框放在中间层,省份选择矩形放在最上面。

图片 10

省份数据涉及的所有元件整理后如下图所示:

直接删除

图片 11

方法二、在页面内选中的项将被删除:通过标记项和选中来,然后删除被标记的项。

省份数据涉及的所有元件整理后如下图所示:

图片 12

图片 13

标记选中项

  1. 准备城市数据及操作显示元件

图片 14

cs中继器(城市待选数据)有两列,一列s保存省份数据,一列cs保存城市数据,注意省份与城市的对应关系。其余操作步骤同省份数据,此处不再描述。

设置

图片 15

方法三、在页面内最后一个被选中的项将被删除:先取消所有的标记然后再标记当前项即可。注意:要把中继器默认的“隔离选项组效果”取消掉,不然就不能进行选中切换。

  1. 准备县区数据及操作显示元件

图片 16

图片 17

删除最后被选中的

  1. 设置省份数据相关元件事件

更新数据
先标记要编辑的项,然后再更新。

单击省份选择时,切换该元件的选中状态;选中时,箭头向上(FontAwesome字体),显示省份下拉选项;取消选中时,箭头向下(FontAwesome字体),隐藏省份下拉选项

图片 18

本文由澳门新葡8455手机版发布于www.8455.com,转载请注明出处:省市县三级联动选择

关键词: www.8455.com

详细解释六大关键难题,杰克 Ma先生您好

原标题:马云老师你好 今日阿里巴巴集团创始人马云发出题为“教师节快乐”的公开信宣布:一年后的阿里巴巴20周...

详细>>

TCP连接的状态详解以及故障排查

原标题:TCP连接的状态详解以及故障排查 我们通过了解 TCP各个状态 ,可以排除和定位网络或系统故障时大有帮助。...

详细>>

又美又有黑科学技术,十二月22日前One plus邀你拍

追求源于热爱,魅族在智能手机和系统体验上,从未放弃过对美的追求,也从未停止对领先科技的探索。在黑科技泛...

详细>>

鹅厂餐厅走红网络,Wechat点餐系统助力人工产后

原标题:鹅厂餐厅走红网络:智能餐盘 在线点餐! 走进餐馆,无需服务员,支付宝、微信扫二维码,手机便可点菜;...

详细>>