Axure教程—拖拽获取(中继器+动态面板 )

这篇具有很好参考价值的文章主要介绍了Axure教程—拖拽获取(中继器+动态面板 )。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

本文将教大家如何用AXURE中的中继器和动态面板制作拖拽获取效果
一、效果介绍
如图:
Axure教程—拖拽获取(中继器+动态面板 )

预览地址:https://68e5b3.axshare.com
下载地址:https://download.csdn.net/download/weixin_43516258/87874085?spm=1001.2014.3001.5503
二、功能介绍

  • 拖拽数据从左边到右边
  • 右边数据可删除

三、制作方法
1、拖入横竖两条线,制作左右两部分,方便拖拽,如图:
Axure教程—拖拽获取(中继器+动态面板 )
2、在左边部分,线拖入三个矩形,分别命名为1、2、3,如图:

Axure教程—拖拽获取(中继器+动态面板 )
3、拖入三个矩形,分别命名为数据1、数据2、数据3,分别叠放在矩形1、2、3上,字体和边框颜色为#FEA213,如图:
Axure教程—拖拽获取(中继器+动态面板 )
三个矩形设置为隐藏状态,如图:
Axure教程—拖拽获取(中继器+动态面板 )

4、在矩形数据1、数据2和数据2上分别叠放动态面板,命名为1、2、3,在每个动态面板中加入删除图片,如图:
Axure教程—拖拽获取(中继器+动态面板 )
每个删除图片设置为隐藏状态,最终设计如图:
Axure教程—拖拽获取(中继器+动态面板 )

四、交互设置
1、动态面板1
(1)动态面板
动态面板1的移动时和拖动时交互设置,如图:
Axure教程—拖拽获取(中继器+动态面板 )
(2) “删除”图片

“删除”图片的鼠标点击时交互设置,如图
Axure教程—拖拽获取(中继器+动态面板 )
2、动态面板2
(1)动态面板
动态面板2的移动时和拖动时交互设置,如图:
Axure教程—拖拽获取(中继器+动态面板 )

(2) “删除”图片

“删除”图片的鼠标点击时交互设置,如图
Axure教程—拖拽获取(中继器+动态面板 )

3、动态面板3
(1)动态面板
动态面板3的移动时和拖动时交互设置,如图:
Axure教程—拖拽获取(中继器+动态面板 )

(2) “删除”图片

“删除”图片的鼠标点击时交互设置,如图
Axure教程—拖拽获取(中继器+动态面板 )
整个设计完成。文章来源地址https://www.toymoban.com/news/detail-475358.html

到了这里,关于Axure教程—拖拽获取(中继器+动态面板 )的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【Axure教程】中继器表格寻找和标记数据

    在系统表格中,我们想在表格中快速找到对应的数据,通常我们会用条件筛选来完成,但是用筛选的方式,其他数据就看不到了,少了两种条件之间的对比。所以如果需要数据对比的情况下,我们更多的是用标记数据的方式,将符合条件的数据标记起来,从而快速对比条件内

    2024年02月04日
    浏览(30)
  • 【Axure教程】中继器表格插入行、复制行和删除行

    表格是展示数据常用的工具,在原型制作时,我们经常会用到插入行和复制行的操作。那作者今天就教大家如何在Axure里用中继器表格制作出以下高保真的交互效果: 插入行:在已选中行的下方插入一行空行 复制行:在已选中行的下方插入一行与已选中行相同内容的行 编辑

    2023年04月09日
    浏览(29)
  • Axure8.0教程:下拉菜单+复选框全选(中继器)

    在设计过程中会常常用到下拉菜单,本次课程我们学习下拉菜单+复选框全选效果。 预览及下载地址:https://ahbvk2.axshare.com/ 一、制作原型 1.制作下拉菜单的选择框 拖入两个【矩形】元件,【文本标签】制作成下拉菜,菜单部分组合一起 2.制作下拉菜单中的菜单部分 (1)全选

    2024年02月05日
    浏览(42)
  • 【Axure高保真原型】中继器表格合并单元格

    今天和大家分享合并单元格的原型模板,包括两种模式的合并方式,转置和从下往上合并,两种方式都可以实现合并的效果,都是用中继器制作的,维护时只需要修改中继器表格即可生成对应效果,如果需要增加列(转置表格对应的是行),也可以参考原型,自行增加元件和

    2024年02月09日
    浏览(32)
  • 【Axure高保真原型】中继器网格图片拖动摆放

    今天和大家分享中继器网格图片拖动摆放的原型模板,我们可以通过鼠标拖动来移动图片,拖动过程其他图标会根据图片拖动自动排列,松开鼠标是图片停放在指定位置,其他图标自动排列。那这个模板是用中继器制作的,所以使用也很方便,我们只需维护中继器表格的信息

    2024年02月10日
    浏览(40)
  • 【Axure高保真原型】3D圆柱图_中继器版

    今天和大家分享3D圆柱图_中继器版的原型模板,图表在中继器表格里填写具体的数据,调整坐标系后,就可以根据表格数据自动生成对应高度的圆柱图,鼠标移入时,可以查看对应圆柱体的数据……具体效果可以打开下方原型地址体验或者点击下方视频观看 【原型效果】 【

    2024年02月03日
    浏览(47)
  • 【Axure高保真原型】JS日期选择器筛选中继器表格

    今天和大家分享JS日期选择器筛选中继器表格的原型模板,通过调用浏览器的日期选择器,所以可以获取真实的日历效果,具体包括哪一年二月份有29天,几号对应星期几,都是真实的,获取日期值后,通过交互对中继器进行日期区间筛选。建议使用谷歌浏览器来演示,其他浏

    2024年02月12日
    浏览(33)
  • Axure之中继器的使用(交互&动作&reperter属性&Item属性)

    目录 一.中继器的基本使用  二.中继器的动作(增删改查) 2.1 新增 2.2 删除  2.3 更新行  2.4 效果展示   2.5 模糊查询 三.reperter属性 在Axure中,中继器(Repeater)是一种功能强大的组件,用于 创建重复的数据集合或列表 。它允许原型中快速 生成多个相似的元素 ,并根据数据

    2024年02月04日
    浏览(39)
  • Axure rp9 利用中继器实现列表新增行、删除行的效果

    中继器(英文名Repeater)是目前为止Axure最复杂的功能(没有之一),学习它的使用有助于我们快速设计一些复杂的交互界面。本文通过Axure rp9 利用中继器实现列表新增行、删除行的案例,介绍如何利用中继器实现以下效果: 1、利用中继器实现列表的隔行变色。 2、实现列表

    2024年02月12日
    浏览(31)
  • 腾达A301无线中继器怎么设置?腾达A301设置教程图文详解

    路由器中继 相信很多朋友比较陌生,其作用主要是起到放大无线路由器信号的作用,从而实现更广的Wifi无线信号覆盖。今天yii666小编为大家带来的是一款比较热门的腾达A301信号放大器中继器无线路由设置使用教程,该设备可以显著提升Wifi信号,可扩展130平 多穿2堵墙,支持与路由

    2024年02月08日
    浏览(30)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包