Axure设计之三级联动选择器教程(中继器)

news2024/11/7 14:22:35

使用Axure设计三级联动选择器(如省市区选择器)时,可以利用中继器的数据存储和动态交互功能来实现。下面介绍中继器三级联动选择器设计的教程:

一、效果展示:

1、在三级联动选择器中,首先选择省份,省份下拉列表中的选项会根据数据集自动填充;

2、当鼠标移动到省份选项后,城市下拉列表会自动更新,仅显示与该省份相关的城市;

3、进一步当鼠标移动到城市后,区县下拉列表会更新为仅显示所选城市的区县;

预览:https://fdsg8u.axshare.com

二、设计思路

1、利用中继器存储省、市、区三级数据,并通过数据集管理这些数据;

2、为省份、城市和区县分别设置选择器,作为用户交互的界面元素;

3、当下拉列表的选项改变时,触发交互事件,根据选中的选项动态更新其他下拉列表的内容;

4、通过中继器的筛选功能,实现根据选中项动态更新下拉列表的效果。

三、关键步骤

1、添加中继器并设置数据集:

从元件库中拖入中继器到画布上,分别命名省级选择中继器、市级选择中继器、区级选择中继器;

省级选择中继器包括code、value两列,市级/区级选择中继器包括code、value、pcode三列,code为省份编码(关联市级选项使用),value为显示名称,pcode为上级行政区划编码;

在数据集表格中,导入省份、城市、区县数据。

2、配置省份下拉列表的交互:

选中省份下拉列表,添加“鼠标移入时”的交互事件;

在交互事件中,使用筛选功能更新城市中继器的数据,只显示与选中省份对应的城市;

同时,清空或重置城市和区域下拉列表的选项。

3、配置城市下拉列表的交互:

选中城市下拉列表,添加“鼠标移入时”的交互事件;

在交互事件中,使用筛选功能更新区域中继器的数据,只显示与选中城市对应的区县;

同时,可以根据需要添加提示信息或验证逻辑。

4、配置区域下拉列表(可选):

如果区域下拉列表只是用于显示选中的区域名称,则无需添加复杂的交互逻辑;

可以简单地显示选中的区域名称,或根据需要添加其他交互效果。

5、优化界面和测试交互:

根据设计需求,调整下拉列表和中继器的布局和样式;

在不同的省份、城市和区县之间切换,确保三级联动选择器能够正确地显示和更新数据;

测试交互的流畅性和准确性,确保用户能够轻松完成省、市、区的选择。

通过以上步骤,你可以使用Axure RP中的中继器设计一个功能完善、交互流畅的三级联动选择器。这个选择器可以应用于各种需要地址选择的场景,如电商平台、数据筛选等。

关键词:axure 三级联动选择 省市区选择

 End·往期推荐

大屏可视化:舞动数据与美观的“设计秘籍”

Axure科技感大屏系统设计:智慧农场管理平台

智慧水务:解锁供水行业的未来密码,引领数字化转型新篇章

Axure原型设计秘籍:解锁高效设计与开发的宝藏工具

Axure Web端交互元件库:从Quick UI到700+组件的飞跃

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2235069.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

K8S篇(基本介绍)

目录 一、什么是Kubernetes? 二、Kubernetes管理员认证(CKA) 1. 简介 2. 考试难易程度 3. 考试时长 4. 多少分及格 5. 考试费用 三、Kubernetes整体架构 Master Nodes 四、Kubernetes架构及和核心组件 五、Kubernetes各个组件及功…

卖模版还能赚到钱吗?

说到赚钱,我想大部分人都会感兴趣。但如果告诉大家现阶段卖模板也能赚钱,可能还是有人不信。我要说说我的观察了。 本文可在公众号「德育处主任」免费阅读 我是一只临期程序猿,我最早接触到“模板能卖钱”这个概念是在模板王里。模板王平台上…

超萌!HTMLCSS:打造趣味动画卡通 dog

这段HTML与CSS代码实现了一个超萌的动画卡通dog。 HTML <div class"dog"><div class"dog-body"><div class"dog-tail"><div class"dog-tail"><div class"dog-tail"><div class"do…

Elasticsearch Interval 查询:为什么它们是真正的位置查询,以及如何从 Span 转换

作者&#xff1a;来自 Elastic Mayya Sharipova 解释 span 查询如何成为真正的位置查询以及如何从 span 查询过渡到它们。 长期以来&#xff0c;Span 查询一直是有序和邻近搜索的工具。这些查询对于特定领域&#xff08;例如法律或专利搜索&#xff09;尤其有用。但相对较新的 …

【YOLOv11[基础]】实例分割Seg | 导出ONNX模型 | ONN模型推理以及检测结果可视化 | python

本文将导出YOLO-Seg.pt模型对应的ONNX模型,并且使用ONNX模型推理以及结果的可视化。话不多说,先看看效果图吧!!! 目录 一 导出ONNX模型 二 推理及检测结果可视化 1 代码 2 效果图

手搓AI大模型应用获25万用户,果断辞职创业,结果收入不如摆摊

我开发的 AI 应用有 25 万用户&#xff0c;我感觉要起飞了&#xff0c;于是辞掉工作&#xff0c;准备大干一番。 结果没想到开局即巅峰&#xff0c;突然就完蛋了。 这几天&#xff0c;一个悲催的程序员创业故事在社交网络上流传&#xff0c;引发了人们的深思。 故事的主人公&…

品质生活新选择:看三星AI神黑钻衣物护理机,如何为用户打造精致日常

屠格涅夫曾说&#xff0c;一个人应当好好地安排生活&#xff0c;要使每一刻的时光都有意义。这不仅是对个人生活的深刻洞察&#xff0c;也是对生活品质的不懈追求。实际上&#xff0c;在追求品质生活的道路上&#xff0c;无关乎年龄和阶层&#xff0c;其核心精髓往往潜藏于那些…

ios打包文件上传App Store windows工具

在苹果开发者中心上架IOS APP的时候&#xff0c;在苹果开发者中心不能直接上传打包文件&#xff0c;需要下载mac的xcode这些工具进行上传&#xff0c;但这些工具无法安装在windows或linux电脑上。 这里&#xff0c;我们可以不用xcode这些工具来上传&#xff0c;可以用国内的香…

Nginx(编译)+Lua脚本+Redis 实现自动封禁访问频率过高IP

1.安装lua 1.1安装LuaJIT yum install readline-devel mkdir -p lua-file cd lua-file/ wget http://luajit.org/download/LuaJIT-2.0.5.tar.gz tar -zxvf LuaJIT-2.0.5.tar.gz cd LuaJIT-2.0.5 make && make install PREFIX/usr/local/luajit 1.2配置LuaJIT环境变量…

OA项目 python + vue3

准备工作 创建django项目 在setting.py进行数据库的配置&#xff1a; DATABASES {default: {ENGINE: django.db.backends.mysql,NAME: , #数据库名字USER: , #连接的数据库的用户名PASSWORD: ,HOST: 127.0.0.1,PORT: 3306,} }安装app&#xff1a; rest_framwork: 关闭csrf…

内网渗透-信息收集篇

通过webshell或其他方式拿下一台机器&#xff0c;并且存在内网环境&#xff0c;这个时候就在准备进行内网渗透&#xff0c;而在内网渗透之前需要对本地机器进行信息收集&#xff0c;才能够更好的进行内网渗透。 目录 Windows本地基础信息收集 权限查看 判断域存在 查看防火…

斯坦福团队研发:手机运行的超GPT-4大模型一夜爆红,下载量突破2000次

在大模型落地应用的过程中&#xff0c;端侧 AI 是非常重要的一个方向。 近日&#xff0c;斯坦福大学研究人员推出的 Octopus v2 火了&#xff0c;受到了开发者社区的极大关注&#xff0c;模型一夜下载量超 2k。 20 亿参数的 Octopus v2 可以在智能手机、汽车、个人电脑等端侧…

【OpenAI】使用O1-Preview模型的3种方式,带你快速提升编程效率!

文章目录 一、模型概述1. GPT-3.5&#xff1a;坚实的基础2. GPT-4.0&#xff1a;突破性的升级3. GPT-4o&#xff1a;多模态处理的先锋4. GPT-4o MINI&#xff1a;轻量高效的AI解决方案5. O1-Preview&#xff1a;推理能力的极致提升 二、性能与应用场景对比性能与应用场景深入解…

一文轻松了解AUTOSAR系统开发步骤顺序

目录 往期推荐 AUTOSAR方法论的典型开发步骤顺序 1. 需求分析&#xff08;Requirement Analysis&#xff09; 2. 系统架构设计&#xff08;System Architecture Design&#xff09; 3. 软件组件设计与实现&#xff08;Software Component Design and Implementation&#…

计算机毕业设计Python+图神经网络手机推荐系统 手机价格预测 手机可视化 手机数据分析 手机爬虫 Django Flask Spark 知识图谱

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…

python基础(1)

声明&#xff1a;学习视频来自b站up主 泷羽sec&#xff0c;如涉及侵权马上删除文章 感谢泷羽sec 团队的教学 视频地址&#xff1a;初识python&#xff0c;环境配置&#xff0c;编程基础以及数据类型_哔哩哔哩_bilibili 一、什么是python Python 是一种高级、解释型、通用编程语…

【大数据学习 | HBASE】hbase的整体架构

hbase的region存储原理图 首先我们看到hbase的组成分为两个大的部分&#xff0c;分别是hmaster和hregionserver&#xff0c;主节点用于协调数据&#xff0c;regionserver用于真正的去管理表&#xff0c;其中regionserver存在多个&#xff0c;他们共同协调管理全有的表&#xff…

软信天成:您企业的数据资产真的安全吗?

您企业的数据资产真的安全吗&#xff1f;当下&#xff0c;数据已成为企业的核心资产&#xff0c;但如何找到、保护这些资产&#xff0c;却是许多企业面临的难题。在此背景下&#xff0c;数据分类分级显得尤为重要。本文将深入探讨数据分类分级&#xff0c;并结合国家标准和行业…

【Android】时区规则库tzdata更新

1 背景&#xff1a; 最近我遇到墨西哥城时区&#xff0c;会出现夏令时&#xff0c;而墨西哥城在2022年底都已经取消夏令时了。 看起来是要更新RK3588上的时区库&#xff0c;我的还是2021a&#xff0c;而现在都已经2024年了 这样能看版本号&#xff1a; cat /system/usr/sha…

国际版JAVA同城打车源码同城服务线下结账系统源码适配PAD支持Android+IOS+H5

架构分析 导航栏&#xff1a;位于界面上方&#xff0c;包含了“数据中心”、“消息”、“用户中心”等主要功能模块的入口&#xff0c;方便用户快速访问。左侧功能模块&#xff1a;在界面的左侧&#xff0c;以列表形式展示了多个功能模块&#xff0c;如“数据中心”、“消息中…