1.4_25 Axure RP 9 for mac 高保真原型图 - 案例24【中继器 - 后台管理系统2】新增数据
相关链接
- 目录
- Axure中文学习网
- AxureShop
- AxureShop-QA
1. 了解使用中继器,新增数据的实现方式
一、成品效果
Axure Cloud 案例24【中继器 - 后台管理系统2】新增数据
一、简介
1.1 除了基本的新增功能,还额外添加了很多快捷操作,都是符合用户操作习惯的。比如:点击弹窗外部,退出弹窗;点击esc退出弹窗;点击enter提交数据等。但输入框中使用tab键切换功能Axure并不能实现,这里我使用alt、shift+alt键代替tab、shift+tab的快捷操作。
二、共 x 条记录
2.1 新增数据后 实时显示 当前数据量(使用富文本框 + [[This.itemCount]]函数)。
三、信息设备列表
3.1 点击 新增 按钮,新增数据弹窗 显示。
3.2 点击 新增 按钮,信息设备列表部分置灰。
四、弹窗相关快捷操作
4.1 当前无弹窗时,键盘点击enter -> 新增数据弹窗 显示。(效果等于点击新增按钮)
4.2 当前有弹窗时,键盘点击esc -> 新增数据弹窗 隐藏。
4.3 当前有弹窗时,鼠标单击弹窗以外部分 -> 新增数据弹窗 隐藏。
4.4 当前有弹窗时,键盘点击enter -> 进行 提交 操作。(效果等于点击提交按钮)
4.5 当前有弹窗时,键盘点击alt -> 光标焦点进入下一文本框,并选中文本框中的文本。
4.6 当前有弹窗时,键盘点击shift+alt -> 光标焦点进入上一文本框,并选中文本框中的文本。
五、弹窗内部
5.1 点击 提交 按钮,将填入信息新增到设备信息列表中。
5.2 输入信息时,无需输入设备编号,编号逻辑为 自增。
5.3 点击 提交 按钮,新增数据弹窗 隐藏。
5.4 点击 提交 按钮,更新当前记录条数(共x条记录)。
5.5 点击 提交 按钮,当前输入信息保留,不清空。
5.6 点击 清空 按钮,所有输入框内容清空,下拉框变为默认选项。
六、弹窗内部校验
6.1 校验:设备名称、规格型号、生产厂商 不能为空。
a) 以上三者之一为空,并执行 提交动作 时,输入框上方提示 字体变红色。
b) 三个(必填)
至多有一个处于红色状态。(选项组+选中状态)
6.2 校验:购置价格必须为 >0的数字。
a) 上方校验不通过则 出现提示: >0的数字
。等待5000ms后,隐藏提示。
b) 校验不合法输入时,除了提示信息,还要将光标放入该输入框。(获取焦点,获取焦点时选中元件上的文本)
历史版本:Axure Cloud 案例23【中继器 - 后台管理系统1】框架搭建
一、框架搭建
1.1 按照 视频 -> 【中继器实战 xxx】 搭建即可,内容较琐碎。页面基本无任何交互功能,仅设计布局及界面。
二、素材准备
使用Axure自带元件。
完成 案例23【中继器 - 后台管理系统1】框架搭建
三、制作方法
整体分为四大部分:1.弹窗c(默认隐藏)、2.标题栏t、3.主内容m、4.背景b。(按图层顺序)
其中 标题栏t、主内容m、背景b 在 案例23 中基本已完成,但也有部分修改。
页面 设置交互:
3.1 背景b
无修改内容,建议设置 锁定位置和尺寸。避免误操作移动背景(锁定后,可以看到元件周围出现红色方块)。
3.2 主内容m
结构上分为以下5小部分:1-文字描述、2-按钮、3-数据列表标题、4-数据列表内容、5-分页。
3.2.1 文字描述
无交互内容
3.2.2 按钮
新增 按钮设置交互:
3.3.3 数据列表标题
无交互内容,对齐表格(中继器)即可
3.3.4 数据列表内容
与案例23 相比,新增蓝框部分内容:
变量:
eq_code:[[Math.max(Item.eq_code)+1]]
count:[[Item.Repeater.itemCount]]
其中:
Math.max() :获取多个值中的最大值。
Item.eq_code:获取所有的编号。
Math.max(Item.eq_code):获取当前最大的编号。
Math.max(Item.eq_code)+1:获取当前最大的编号+1。用于给新增数据 id自增 使用。
Item.Repeater.itemCount:获取当前数据量,用于显示 共x条记录 时使用。
原理: 每次数据新增时,都会触发 每次加载 动作。同时计算出下一个自增id值,以及当前数据总量。
注:由于案例目前还未涉及 筛选、删除 功能,所以还不确定其是否会触发 每次加载 动作、并导致自增id计算错误问题。(到后面测试)
共x条记录: 选择富文本,富文本可以设置字体颜色和样式。
设置值:共 [[This.itemCount]] 条记录
也可以用:共 [[Item.Repeater.itemCount]] 条记录
或共 [[count]] 条记录
3.3.5 分页
无任何交互:
3.3 标题栏t
与案例23 相同,无任何交互,无任何变化:
3.4 弹窗c
弹窗相关元件设为一个大的组合,默认是隐藏的,只有点击时才会展开。
弹窗c分为7部分组成:1.提示文字、2.输入框、3.文字描述、4.按钮、5.背景、6.置灰、7.提交
3.4.1 提示文字
无任何交互,但要注意
1. 提示文字-5.购置价格 默认为隐藏
2. 【1.设备名称】、【3.规格型号】、【4.生产厂商】设为同一选项组,选中样式如下:
3.4.2 输入框
由4个文本框、2个下拉框组成。文本框设置交互,下拉框不需要设置交互。
在任一文本框中:
按下enter(Return)
键:执行提交动作
按下alt
键:光标移入下一个输入框并选中文字(tab键冲突不能使用,用alt模拟tab键效果)。
按下shift + alt
键:光标移入上一个输入框并选中文字(tab键冲突不能使用,用alt模拟tab键效果)。
其中:
第一个输入框不需要设置shift +alt键,因为第一个文本框不存在"上一个输入框"。
第四个输入框不需要设置shift +alt键,因为第四个文本框不存在"下一个输入框"。
3.4.3 文字描述
无任何交互
3.4.4 按钮
清空按钮:
1. 所有输入框置空
2. 输入下拉选项置为默认选项
3. 光标回到第一个输入框(设备名称)
4. 提示框全部变为为选中状态(黑色字体)
提交按钮:通过热区进行提交动作,此方法在案例22 中有详细描述。
3.4.5 背景
无任何交互
3.4.6 热区
矩形:实现置灰效果:#000000 ,20%透明度,其位置正好覆盖下层主内容,大小一致。
热区:
3.4.7 提交(重点)
执行校验、提交操作,共5中情形:
1. 设备名称校验
2. 规格型号 校验
3. 生产厂商 校验
4. 购置价格 校验
5. 校验成功,提交数据
利用了Axure特性:(执行顺序)
step1. 判断条件1(设备名称校验),如果:
1) 满足条件1,执行条件1逻辑,程序结束
2) 不满足条件1,向下继续执行
step2. 判断条件2(规格型号校验),如果:
1) 满足条件2,执行条件2逻辑,程序结束
2) 不满足条件2,向下继续执行
step3. 判断条件3(生产厂商校验),如果:
1) 满足条件3,执行条件3逻辑,程序结束
2) 不满足条件3,向下继续执行
step4. 判断条件4(购置价格校验),如果:
1) 满足条件4,执行条件4逻辑,程序结束
2) 不满足条件4,向下继续执行
step5. 判断条件5(校验成功,提交数据),如果:
1) 满足条件5,执行条件5逻辑,程序结束
2) 不满足条件5,向下继续执行,没有可执行内容,程序结束
又∵条件5 = 没有任何条件,一定执行
∴只要执行到这里,则说明所有校验通过,一定会执行提交动作
3.4.7.1 设备名称校验
a.判断逻辑:
条件:
[[input_eq_name.trim()]]
= 空值
[[input_eq_name]]:为自定义的局部变量,用于获取元件文字。
[[*.trim()]]:函数用于去除两端空格。
[[input_eq_name.trim()]]:获取输入内容后去掉两端空格,防止用户输入空值。
b.执行逻辑:
1. 文字描述变为 选中状态(提示变色)
1) 选中样式为红色字体、未选中样式为黑色字体
2) 由于三个必填
在同一选项组,任一选中,其他会变为未选中状态
2. 设备名称输入框 获取焦点(鼠标光标)
3.4.7.3 规格型号校验
a.判断逻辑:
条件:
[[input_model_type.trim()]]
= 空值
[[input_model_type]]:为自定义的局部变量,用于获取元件文字。
[[*.trim()]]:函数用于去除两端空格。
[[input_model_type.trim()]]:获取输入内容后去掉两端空格,防止用户输入空值。
b.执行逻辑:
1. 文字描述变为 选中状态(提示变色)
1) 选中样式为红色字体、未选中样式为黑色字体
2) 由于三个必填
在同一选项组,任一选中,其他会变为未选中状态
2. 规格型号输入框 获取焦点(鼠标光标)
3.4.7.4 生产厂商校验
a.判断逻辑:
条件:
[[input_source_company.trim()]]
= 空值
[[input_source_company]]:为自定义的局部变量,用于获取元件文字。
[[*.trim()]]:函数用于去除两端空格。
[[input_source_company.trim()]]:获取输入内容后去掉两端空格,防止用户输入空值。
b.执行逻辑:
1. 文字描述变为 选中状态(提示变色)
1) 选中样式为红色字体、未选中样式为黑色字体
2) 由于三个必填
在同一选项组,任一选中,其他会变为未选中状态
2. 生产厂商输入框 获取焦点(鼠标光标)
3.4.7.5 购置价格校验
a.判断逻辑:
条件1:
[[Math.floor(input_price)]]
不是 数字 → 过滤数字以外情况
[[input_price]]:为自定义的局部变量,用于获取元件文字。
[[Math.floor(*)]]:传入
[[input_source_company.trim()]]:获取输入内容后去掉两端空格,防止用户输入空值。
条件2:[[input_price]]
<= 0 → 过滤负数情况
[[input_price]]:为自定义的局部变量,用于获取元件文字。
条件3:[[input_price.trim()]]
= 空值 → 过滤空值情况
[[input_price]]:为自定义的局部变量,用于获取元件文字。
[[*.trim()]]:函数用于去除两端空格。
[[input_price.trim()]]:获取输入内容后去掉两端空格,防止用户输入空值。
匹配任何:满足3个条件中任意一个,则认为满足条件
b.执行逻辑:
1. 三个必填
文字描述变为 未选中状态
1) 未选中样式为黑色字体
2) 三个必填
在同一选项组,这里全部设置为假
3) 能进入这一步执行逻辑,说明之前的校验全部通过了
2. 购置价格输入框 获取焦点(鼠标光标)
3. 购置价格文字描述出现变化
1) 设置元件文字 >0的数字
2) 显示元件,动画逐渐 500ms
3) 等待5000ms
4) 隐藏元件,动画逐渐 1500ms
3.4.7.x 校验成功,提交数据
a.判断逻辑:true(表示执行到这里,已经通过全部交验,无需判断,直接进行提交动作)
b.执行逻辑:
1. 三个必填
文字描述变为 未选中状态
1) 未选中样式为黑色字体
2) 三个必填
在同一选项组,这里全部设置为假
3) 能进入这一步执行逻辑,说明之前的校验全部通过了
2. 弹窗c 隐藏
3. 数据表 添加行
4. 文字提示 隐藏
1) 购置价格输入错误后动画大概7秒后才会消失,如果在这7秒内完成了提交动作,并重新打开新增窗口,会看到错误提示还是处于高亮状态。为了避免这种情况发生,提交时要将其直接隐藏掉。
c.添加行:
1. 只有设备编号通过全局变量eq_code获取
eq_code:赋值在表格数据加载时
2. 四个输入文本框通过局部变量获取元件文字
3. 三个输入框下拉框通过局部变量获取被选项
22/10/12
M
1.4_25 Axure RP 9 for mac 高保真原型图 - 案例24【中继器 - 后台管理系统2】新增数据相关推荐
- 1.4_26 Axure RP 9 for mac 高保真原型图 - 案例25【中继器 - 后台管理系统3】优化- 3D按钮、键盘操作
相关链接 目录 Axure中文学习网 AxureShop AxureShop-QA 案例目标 1. 了解3D按钮效果的实现方式 一.成品效果 Axure Cloud 案例25[中继器 - 后台管理系 ...
- 1.4_28 Axure RP 9 for mac 高保真原型图 - 案例27【中继器 - 后台管理系统5】功能-弹窗修改数据
相关链接 目录 Axure中文学习网 AxureShop AxureShop-QA 案例目标 1. 了解使用中继器,弹窗修改数据的实现方式 一.成品效果 Axure Cloud 案例27[中继器 - ...
- 1.4_21 Axure RP 9 for mac 高保真原型图 - 案例20【中继器 - 入门1】中继器原理Repeater Table
相关链接 目录 Axure中文学习网 AxureShop AxureShop-QA 案例目标 1. 了解 中继器 是什么 2. 了解 中继器 的使用场景 3. 会使用 中继器 展示数据 4. ...
- 1.4_10 Axure RP 9 for mac 高保真原型图 - 案例9 【按钮】单选按钮组
相关链接 目录 Axure中文学习网 AxureShop AxureShop-QA 案例目标 1. 了解 单选 功能的实现原理 2. 掌握 按钮 的常见使用方式 3. 掌握 指定单选按钮的组 功 ...
- 1.4_18 Axure RP 9 for mac 高保真原型图 - 案例17 【js-echarts官网】
相关链接 目录 Axure中文学习网 AxureShop AxureShop-QA 最开始只是想尝试一下,在Axure RP9中引用echarts图片.访问了一下echarts官网 ,后来对官网的 ...
- 1.4_15 Axure RP 9 for mac 高保真原型图 - 案例14 【动态面板-滚动条4】深色模式 - 图层处理
相关链接 目录 Axure中文学习网 AxureShop AxureShop-QA 案例目标 1. 了解 深色模式 的实现原理 2. 掌握 在 概要 模块中,显示/隐藏 对象 3. 掌握 置于顶 ...
- 1.4_22 Axure RP 9 for mac 高保真原型图 - 案例21【中继器 - 入门2】添加数据
相关链接 目录 Axure中文学习网 AxureShop AxureShop-QA 案例目标 1. 了解 添加数据 的实现方式 2. 掌握 自增id 的实现方式 3. 掌握 在视图中显示 操作 ...
- 1.4_23 Axure RP 9 for mac 高保真原型图 - 案例22【中继器 - 入门3】功能优化
相关链接 目录 Axure中文学习网 AxureShop AxureShop-QA 案例目标 1. 了解 回车提交 的实现方式 2. 了解 获取焦点 功能的使用(鼠标光标) 3. 了解 点击弹窗 ...
- 1.4_5 Axure RP 9 for mac 高保真原型图 - 案例4 【旋转的唱片2】计时器
相关链接 目录 Axure中文学习网 AxureShop AxureShop-QA 案例目标 1. 了解 计时功能 的实现原理 2. 熟悉 交互 功能中,情形(case) 的使用场景 3. 掌握 ...
最新文章
- 径向基函数神经网络_基于RBF神经网络的网络安全态势感知预测研究
- php post 渲染数据,php 程序内部post数据实现方法
- JavaScript多继承(转载)
- concurrentbag 删除_你知道吗?这样删除iPhone中的APP腾出的空间会更大
- error: possibly undefined macro: LT_SYS_SYMBOL_USCORE please use m4_pattern_allow
- 全网首发:以字型为例,以bit表示的二维数组矩阵,旋转90、-90
- Lync 小技巧-52-Lync 2013-不加域-客户端-2-导入-证书-信任链
- Excel数据导入sql临时表操作步骤
- java手写-txt大文本分割
- python真好玩 pdf 下载_Python真好玩:教孩子学编程_PDF电子书
- vhms销售系统_kangle虚拟主机管理系统(vhms虚拟主机销售系统)
- vlan 的三种模式
- 关于8.0出现Only fullscreen opaque activities can request orientation
- 微信小程序前端【订阅消息】遇到的问题及总结
- xp系统打印机服务器win7连接不了,xp连不上win7的打印机,win7连接打印机
- VOIP 语音视频通话 ---总述
- SpringCloud Gateway详解与配置
- 大促活动如何抵御大流量 DDoS 攻击?
- vscode上利用screen命令跑代码
- 小红书笔记api_小红书笔记怎么写?
热门文章
- Spring中@Transactional事务回滚(含实例详细讲解,附源码)
- action的绝对地址 html,form之action的绝对路径与相对路径
- luogu P3690 【模板】Link Cut Tree (动态树)
- Java变量的声明和赋值
- 【直播回顾】OpenHarmony知识赋能六期第五课—WiFi子系统
- 烽火通信张宾:智慧光网为工业互联网提供充足动力,开创工业互联网新时代...
- centos卸载源码安装的php
- VR全景诚邀您走进2019中国北京世界园艺博览会(可在线体验)
- 骨传导耳机伤耳朵吗?带你一分钟了解骨传导耳机
- 移动机器人——里程计矫正