axure中继器案例

第一步:展示数据

  1. 做表头1*7的,修改底色为灰色(方便和下面的数据分隔开,好查看)
  2. 修改文本框内容,第一个空着,后面一次改为“姓名”,“性别”,“年龄”,“电话”,“操作1”,“操作2”
  3. 添加一个中继器,复制表头,双击进入编辑区域,粘贴表头,删除原有的一个矩形框,将复制的表头拉到原点
  4. 删除中继器编辑器中表头的文字,并将其重新命名为“姓名”,“性别”,“年龄”,“电话”,“修改”,”删除“,特别的将”修改“,”删除“修改样式,成为蓝色加下划线,保留”修改“、”删除“的表头内容
  5. 退出中继器编辑器添加数据,第一行分别命名为name,gender,age,tel,下面行为需要添加的数据,这里添加了22行数据
  6. 将中继器的数据关联起来,在数据项加载时
    在这里插入图片描述

第二步:删除数据

进入中继器编辑器,设置”修改“点击时的交互样例为删除this行
在这里插入图片描述

第三步:修改数据

  1. 退出中继器编辑区,增加一个修改弹出框

  2. 弹出框,一个矩形中四个标签文本内容分别是“姓名”,“性别”,“年龄”,“电话”,再有四个文本框,分别命名为“姓名”,“性别”,“年龄”,“电话”,下方两个矩形框,分别将文本内容和命名为”确认“和”取消“,将所有内容进行组合和命名为”修改弹出框“,设置为隐藏

  3. 双击修改进入中继器编辑区,添加鼠标单击时用例,标记this行
    在这里插入图片描述

  4. 设置”姓名“的文本为中继器数据库”name“列的值
    在这里插入图片描述
    依次类推设置”性别“、”年龄“、”电话“
    在这里插入图片描述

  5. 显示修改弹出框
    在这里插入图片描述

  6. 退出中继器编辑器,为确认按钮更新已标记的每列对应的数据
    在这里插入图片描述在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

​ 为确认按钮继续添加交互,取消所有标记行,隐藏修改弹出框

在这里插入图片描述
在这里插入图片描述

  1. 取消按钮添加点击时隐藏修改弹出框的交互用例

在这里插入图片描述

第四步:添加数据

  1. 添加一个按钮和一个添加弹出框
  2. 添加按钮增加交互用例,点击时显示添加弹出框
  3. 确认按钮增加点击时用例,为中继器添加行后隐藏添加弹出框
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
  4. 取消按钮添加点击用例为隐藏添加弹出框

第五步:搜索

  1. 添加一个搜索框、一个模糊搜索、一个精准搜索框,分别将内容和命名为”搜索“、”模糊搜索“、”精准搜索“

  2. 为精准搜索添加点击时用例

    用例1:当搜索框为空时,移除全部筛选条件

在这里插入图片描述

在这里插入图片描述
用例2:当搜索框不为空是,添加中继器筛选
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  1. 为精准搜索添加点击时用例

    用例1:搜索框为空时,移除所有筛选条件

在这里插入图片描述

在这里插入图片描述

​ 用例2:当搜索框不空时,添加筛选条件
在这里插入图片描述
在这里插入图片描述

第六步:分页跳转

  1. 将中继器中的数据进行分页
    在这里插入图片描述

  2. 拖入”上一页“、”下一页“选择按钮

  3. 为两个按钮添加点击时按钮
    在这里插入图片描述

  4. 添加”首页“和”末页“按钮,并为其添加点击时用例
    在这里插入图片描述

  5. 跳转设置,设计两个按钮和一个文本框,按钮内容分别时”跳转至“、”页“,文本框命名为跳转页数,文本框添加文本改变时的用例
    在这里插入图片描述

  6. 设置页码,添加一个文本,命名为”页码“,点击中继器,在加载时设置文本
    在这里插入图片描述

第七步:全选、取消、反选

  1. 进入中继器,添加一个复选框,命名为”选择“,在第一列
  2. 退出编辑器,添加三个按钮分别命名和内容设置为”全选“,”取消“,”反选“
  3. 为按钮添加点击时用例,对应的值分别为true、false、toggle
    在这里插入图片描述

第八步:排序

  1. 添加一个三角形并命名为”三角形“,放在年龄右上方
  2. 为”年龄“添加点击时用例,添加排序,并将三角形旋转
    在这里插入图片描述
    在这里插入图片描述

可以为按钮等添加鼠标移入和按下的交互样式

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值