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. 掌握 ...
最新文章
- 南方人物周刊：智能手机割据战
- 一篇特别长的总结(C专家编程)
- C#中的thread和task之Task
- iOS -- SKScene类
- 控制反转和依赖注入的理解(通俗易懂)_Spring 的本质系列之依赖注入_一点课堂（多岸学院）...
- 华硕电脑的触摸板关闭
- 【兼容封装】addEventListener()和attachEvent()跨浏览器的兼容性处理
- html多选框写法,HTML多选框
- Wincc常用C脚本
- 金山打字计算机实验报告,打字实训报告总结(共10篇).docx
- ip地址和域名的关系是什么？
- 【转】一起做RGB-D SLAM (1)
- velocity 将字符串切割按每隔3位加逗号，map集合遍历，字符串拼接，
- FPGA 学习笔记：Vivado 2020.2 MicroBlaze MIG 测试 DDR3 篇一
- 靠期货真的能实现财务自由么?
- VDA 6.3 2022 EN 黄皮书.最新版 汽车质量VDA6.3-2022过程审核
- 【福利】将图片转成文字组成的的图片，比如将苍老师图片转成“苍老师”的图片！
- 《从Excel到Python——数据分析进阶指南》一第1章 生成数据表
- MRP/MRPII/ERP三者关系
- 【转载】噪声基底的计算和GPS接收机灵敏度分析