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

本文由 @十月大神 原创发布于人人都是产品经理。未经许可,禁止转载

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

  1. 为第一个情形添加条件,点击添加条件,弹出条件创建弹框,运算符左侧分别下拉选择“元件文字”和“账号输入”,运算符右侧选择文本,填写13333333333,运算符选择==;点击表达式右侧的添加行,添加第二个条件,运算符左侧分别下拉选择“元件文字”和“密码输入”,运算符右侧选择文本,填写mima333,运算符选择==,表达式上方的符合选择“全部”,点击确定,完成条件设置。

    图片 1登录成功-条件表达式.png

  2. 为事件添加第二个情形,点击添加情形,点击添加条件,弹出条件创建弹框,运算符左侧分别下拉选择“元件文字”和“账号输入”,运算符右侧选择文本,填写13333333333,运算符选择!=;点击表达式右侧的添加行,添加第二个条件,运算符左侧分别下拉选择“元件文字”和“密码输入”,运算符右侧选择文本,填写mima333,运算符选择!=,表达式上方的符合选择“任何”,点击确定,完成条件设置。点击插入动作,动作列表中选择“显示/隐藏”,目标元件选择“登录失败提示”,选择显示;插入动作“等待”,等待时间设置1000毫秒,插入动作“显示/隐藏”,目标元件选择“登录失败提示”,选择隐藏。

    图片 2登录失败-条件表达式.png图片 3登录失败-动作配置.png

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

制作tab框

条件表达式中间的关系运算符包含了大于、小于、小于等于、大于等于。代表了两侧表达式之间的大小关系,表达式的内容通常是可以量化的数值或变量。

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

图片 4

图片 5表达式.png图片 6运算符.png

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

文本框

图片 7全部.png图片 8任何.png

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

七、中继器

图片 9在思考逻辑?.jpg

省份下拉选项展开,单击某一项时,将该项值赋值给省份显示文本框,同时触发省份选择的单击事件(作用是隐藏省份下拉选项框)

设置所有的tab选项组名称

  1. 拖动下拉列表框至设计区域,添加列表项,项的内容为省份名称,命名为省份;拖动一个列表框至设计区域,添加列表项,项的内容为省城市名称;将列表框右键转换为动态面板,复制多个状态(注意每个状态的命名,建议以省命名),每个状态的列表框显示不同省份的城市,动态面板命名为城市。

  2. 我们期望实现的效果是,当下拉列表框选择不同的省份时,下方的列表框显示对应省份的城市列表。

  3. 选中省下拉列表,在元件事件列表中选择“选项改变时”事件,选择“设置面板状态”动作,目标元件选择动态面板,选择对应的面板状态,点击完成,完成动作设置。

    图片 10广东-设置动作.png

  4. 为刚才的情形1设置条件,点击添加条件,在条件创建弹框中,运算符左侧分别选择被选项和当前,运算符右侧分别选择选项和广东,点击确定,完成条件设置。

    图片 11广东-设置条件.png

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

内联框架

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

图片 12

条件表达式中,可供选择的逻辑运算符有:包含、不包含、是、不是。主要表达运算符两侧内容的包含关系和是非关系。

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

Axure中是通过设置图片选中状态后改变图片来实现。
同时要设置相互切换的tab为一组,这样就可以一直只选中一个tab。

假设正确的账号为13333333333,密码为mima333

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

对勾框制作

图片 13注册提示.png

  1. 设置县区数据相关元件事件

排序
直接设置事件中的排序即可

当我们为事件添加第1个情形时,如果符合情形1的条件,则执行设定的交互动作;添加第2个情形时,则变成了否则这样的句式,则执行设定的交互动作,变成了与第1个情形对立的情况,即除第1个情形之外的条件下,执行情形2的动作。很多时候我们并不希望这样,比如我们希望在选择省份下拉列表时,选项中选择不同的省,下方显示该省的城市列表。这个时候就需要为省份下拉列表添加”选项改变时“事件,将各省的城市列表转换为动态面板不同的状态。在为省份下拉列表这一元件选择不同的选项时,设置动态面板显示不同的状态,将下拉列表的各项作为情形的逻辑条件。这个时候,其实我们希望每个情形的执行是并列关系,互不干扰。因此,在这里我们手动将其他情形切换为如果的逻辑句式。右击情形,选择“切换为[如果]或[否则]"。

实现效果

列表关联选项

一个事件下可以添加多个情形。比如,你有一个下拉列表框,其中的项是不同的省份,你可以为给“选项改变时”事件添加多个不同的情形,通过不同的下拉列表项,执行不同的动作。默认情况下,从第二个情形开始都是否则形式的语句,可以手动点击切换为如果形式的语句。在原型中,用例是从上至下按顺序执行的。我们也可以让每个满足条件的情形都被执行。要做到这一点其实很简单,右击情形,并选择“切换为[如果]或[否则]”,将否则切换为如果。例如,在注册表单中,对每个文本输入项的内容进行单独验证。当点击注册按钮时,可以为每个文本框添加一个如果结构的条件情形,如果不符合条件,情形就动态显示不同的错误提示。

图片 14

对勾框

  1. 其他省份的城市列表切换显示同上一步一致。

图片 15

图片 16

看过连载前文的都知道,在Axure中完成一个基本的交互设置其实很简答,我们只要按照提示与引导一步步的选择事件和动作,做好元件和情形的命名即可。当你熟悉了,情形的命名也可以省略了。

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

例子

一个完整的条件语句由表达式和运算符构成,表达式的内容可以是文本、变量值、变量值长度、元件文字、元件文字长度、选项、选中状态、面板状态、元件的可见性、元件范围、键盘按键、指针等一切可以通过外在形式表达的内容。运算符包含了算数运算符、关系运算符和逻辑运算符。

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

直接删除

全部:当全部条件都满足时,才能执行设置的动作,每个条件之间是“与”的关系,需要同时成立。我们以登录为例,点击登录按钮时,我们需要判断账号、密码,只有当账户和密码都正确,才提示“登录成功”。账号和密码的条件表达式,他们之间的逻辑关系就是全部。任何:当其中一个条件满足时,就可以执行设置的动作,每个条件之间是“或”的关系,即只要求其中一项成立。还是以登录为例,点击登录按钮时,判断账号和密码,如果其中一个不正确,则提示“账号与密码不匹配,登录失败”。

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

图片 17

我们知道有些事件的发生是有前提条件的,不同的条件会导致事件发生不同的动作,这就是事务的内在逻辑。“逻辑”一词最早由古希腊学者亚里士多德提出。狭义上逻辑既指思维的规律,也指研究思维规律的学科即逻辑学。广义上逻辑泛指规律,包括思维规律和客观规律。逻辑包括形式逻辑与辩证逻辑,形式逻辑包括归纳逻辑与演绎逻辑,辩证逻辑包括矛盾逻辑与对称逻辑。对称逻辑是人的整体思维(包括抽象思维与具象思维)的逻辑。

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

添加一个矩形,在矩形中添加✔然后设置矩形选中状态后文字颜色为其他色。

连接两个表达式的算数运算符为==和!=。前一个为赋值符号,即将符号右侧的内容赋值给左侧表达式;第二表示不相等,即运算符两侧的内容不相等。

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

文本框都是用一个矩形设置边框样式,用一个隐藏边框的文本框输入内容。

5.为事件添加第2个情形,添加逻辑条件,在条件创建弹框中,运算符左侧分别选择被选项和当前,运算符右侧分别选择选项和浙江。点击插入动作,动作列表选择”设置面板状态”,选中“城市”动态面板,面板状态切换为“浙江”,点击完成,完成动作设置。

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

例如选择广东省时,第三栏中的内容自动变为广东省市区列表。
方法:通过把市区列表转换为动态面板,设置省市列表框的事件,然后改变动态面板状态。
小技巧:可以把动态面板中页面值设置得和省市列表中一样,这样就可以快速匹配。

图片 18如果或否则.png

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

图片 19

图片 20浙江-设置条件.png图片 21浙江-设置动作.png

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

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

假设正确的账号为13333333333,密码为mima333

图片 22

九、函数

  1. 使用矩形、文本框、按钮及文本标签等元件,完成登录界面线框图的搭建。文本框作为输入项元件、按钮为登录,两个文本标签作为登录成功和登录失败的提示信息,注意做好各元件的命名工作。

  2. 为登录按钮添加“鼠标单击时”事件,选中登录按钮,在元件事件列表中选择“鼠标单击时”事件,元件动作列表选择”显示/隐藏“,目标元件选择“登录成功提示”,插入第二个动作“等待”,设置等待1000毫秒,插入第三个动作“显示/隐藏”,目标元件选择“登录成功提示”。

    图片 23登录成功-动作配置.png

  3. 为情形添加条件,我们期望实现的效果是:当输入的账号和密码都正确时,提示“登录成功”;当账号或密码有一个错误时,则提示“账号与密码不匹配,登录失败”。

图片 24

图片 25

元件准备

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

图片 26

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

图片 27

图片 28

当城市显示文本框内容改变时,将县区文字文本框的内容改为请选择(重置县区数据)

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

图片 29

图片 30

当省份显示文本框内容改变时,将城市显示文本框的内容改为请选择(重置城市数据),触发城市中继器的载入事件

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

取消选中时,箭头向下(FontAwesome字体),隐藏城市下拉选项

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

图片 31

删除最后被选中的

4、设置城市数据相关元件事件

全局变量可以在该项目中所有页面应用(读取与改写)。

  • 如果省份显示为“请选择”,表示省份还没被选中,设置界面提示为“请先选择省份!”,1秒后,自动隐藏提示
  • 如果省份显示不为“请选择”,表示省份已经被选中了,这个时候,需要为中继器添加筛选功能,仅显示已选中省份对应的城市数据;箭头向上(FontAwesome字体),显示城市下拉选项

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

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

单选按钮

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

图片 32

图片 33

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

原理分析

文本框的制作

责任编辑:

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

实用小技巧:利用显示事件的“灯箱效果”,背景色为黑色,透明度设置为20%。提示效果很漂亮。

编辑按钮事件设置

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

设置

题图来自 Unsplash ,基于 CC0 协议返回搜狐,查看更多

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

本案例已完成,点击查看上一篇案例《动态随机获取“大小写字母与数字”验证码》;

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

图片 34

列表选项的关联选择

图片 35

设置方式

图片 36

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

图片 37

八、布局变量

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

图片 38

图片 39

二、对齐

作者:十月大神,个人网站: www.pmgod.cn

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

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

设置每页显示项数以及跳转到指定页
直接设置每页显示项数即可,可以直接在中继器样式设置,也可以在事件中“设置每页显示项目数”;跳转到指定页可以在事件中设置当前显示页数;同时,可以直接设置“next”“previous”“last”来进行跳转页码。

选中时,需要判断省份显示的文字是否为请选择:

axure中可以输入文字的地方后面都可以输入fx函数。
其中函数语法:[[变量1*变量2]];变量进行运算必须在[[ ]] 内,在[[ ]]]外运算符无效,只会被当做字符串处理

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

图片 40

图片 41

图片 42

  1. 可以任意选择全国所有省份、选择该省份对应的城市、选择该城市对应的县区;
  2. 未选择省份时,点击“城市下拉选择”,提示“请先选择省份”;
  3. 未选择城市时,点击“县区下拉选择”,提示“请先选择城市”;
  4. 切换选中省份时,重置城市及县区选项;
  5. 切换选中城市时,重置县区选项
  6. 当前选项处于下拉框选项状态时,点击其他选择框,隐藏当前选项下拉框;
  7. 下拉选项框展示时,下拉箭头向上,下拉选项框隐藏时,下拉箭头向上;
  8. 动态显示三级行政区移入状态、选中状态、取消选中状态。

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

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

标记选中项

图片 43

图片 44

图片 45

Ctrl K 锁定对象位置

图片 46

单选按钮的制作

中继器添加筛选功能,仅显示已选中省份对应的城市数据,设置方式如下:

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

图片 47

局部变量只在某一个动作中有效,在另一个动作中就无效了。

县区各元件点击、显示事件与城市各元件一致,以下是事件设置截图,具体不在描述

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

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

设置状态

图片 48

六、动态面板

图片 49

图片 50

单击城市选择时,切换该元件的选中状态;

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

四、组合对象与锁定对象

面板中页面值设置

五、注意点

筛选
直接设置事件中的筛选即可,注意筛选条件的设置。

图片 51

一、辅助线

Axure的默认单选按钮是不能设置样式的,所以只能通过选中状态下填充颜色自己制作。

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

效果一

  • RP格式
    单一用户模式
  • RPPRJ
    团队协作的项目文件
    签入控制
    可以取消签出
    版本控制和恢复到历史版本
  • RPLIB
    自定义元件库模式

三、存储

七、全局变量

图片 52

效果二

本文由北京28官网发布于北京幸运28开奖官网,转载请注明出处:Axure教程:省市县三级联动选择(全国省市区数据