Axure教程—中继器分页

news2024/12/23 9:30:23

本文是关于Axure中继器的运用操作,详细讲解利用Axure中继器实分页的操作流程,比较基础,供初学者参考学习。
效果
在这里插入图片描述
预览地址:https://hd42dm.axshare.com

功能
1、点击“数字”显示相应页面的内容
2、点击“首页”显示第一页内容
3、点击“尾页”显示最后一页内容
4、点击“上一页”显示当前页面上一页内容
5、点击“下一页”显示当前页面下一页内容

制作
一、 需要的元件:

  • 中继器
  • 矩形
    二、制作过程
    1、表头
    拖入五个矩形元件(与中继器列数一致),分别命名为学号、姓名、年龄、性别、班级,五个矩形组合一起,命名为表格title,如图:
    在这里插入图片描述
    2、中继器
    在矩形下方拖入一个中继器元件,命名为list,并对中继器赋值,如图:
    在这里插入图片描述
    3、中继器内部
    拖入五个矩形元件(与中继器列数一致),分别命名为学号、姓名、年龄、性别、班级,五个矩形组合一起,命名为data,如图:在这里插入图片描述
    4、页码按钮
    拖入12个矩形元件,分别命名为ijndex、previous、p1、p2、p3、p4、p5、p6、p7、p8、next、last,组合一起命名为分页,如图:

在这里插入图片描述
元件制作完毕

交互设置
1、中继器
中继器每项加载时,分别对中继器内部矩形学号设置文本[[Item.col1]]、姓名[[Item.col2]]、年龄[[Item.col3]]、性别[[Item.col4]]、班级[[Item.col5]],如图:

在这里插入图片描述
2、页码按钮

  • 首页
    鼠标点击时,设置中继器页面为1,设置P1的状态为“ture”,如图
    在这里插入图片描述
    在这里插入图片描述

  • 上一页
    鼠标点击时设置,如图:
    在这里插入图片描述

  • P1
    鼠标点击时,设置当前元件为选中状态为”true“,并对p1、p2、p3、p4、p5、p6、p7、p8进行文字设置,设置中继器当前页面为[[LVAR1]],如图:
    ![在这里插入图片描述](https://img-blog.csdnimg.cn/fbb1b3312a354fdaaff0c7b87cefe187.png

  • P2
    鼠标点击时,设置当前元件为选中状态为”true“,并对p1、p2、p3、p4、p5、p6、p7、p8进行文字设置,设置中继器当前页面为[[LVAR1]],如图:
    在这里插入图片描述

  • P3
    鼠标点击时,设置当前元件为选中状态为”true“,并对p1、p2、p3、p4、p5、p6、p7、p8进行文字设置,设置中继器当前页面为[[LVAR1]],如图:
    在这里插入图片描述

  • P4
    鼠标点击时,设置当前元件为选中状态为”true“,并对p1、p2、p3、p4、p5、p6、p7、p8进行文字设置,设置中继器当前页面为[[LVAR1]],如图:
    在这里插入图片描述

  • P5
    鼠标点击时,设置当前元件为选中状态为”true“,对p1设置文本1、p2设置为本…、p3设置文本[[LVAR1.pageCount-5]]、p4设置文本[[LVAR1.pageCount-4]]、p5设置文本[[LVAR1.pageCount-3]]、p6设置文本[[LVAR1.pageCount-2]]、p7设置文本[[LVAR1.pageCount-1]]、p8设置文本[[LVAR1.pageCount]],设置中继器当前页面为[[LVAR1]],如图:
    在这里插入图片描述

  • P6
    鼠标点击时,设置当前元件为选中状态为”true“,对p1设置文本1、p2设置为本…、p3设置文本[[LVAR1.pageCount-5]]、p4设置文本[[LVAR1.pageCount-4]]、p5设置文本[[LVAR1.pageCount-3]]、p6设置文本[[LVAR1.pageCount-2]]、p7设置文本[[LVAR1.pageCount-1]]、p8设置文本[[LVAR1.pageCount]],设置中继器当前页面为[[LVAR1]],如图:
    在这里插入图片描述

  • P7
    鼠标点击时,设置当前元件为选中状态为”true“,对p1设置文本1、p2设置为本…、p3设置文本[[LVAR1.pageCount-5]]、p4设置文本[[LVAR1.pageCount-4]]、p5设置文本[[LVAR1.pageCount-3]]、p6设置文本[[LVAR1.pageCount-2]]、p7设置文本[[LVAR1.pageCount-1]]、p8设置文本[[LVAR1.pageCount]],设置中继器当前页面为[[LVAR1]],如图:在这里插入图片描述

  • P8
    鼠标点击时,设置当前元件为选中状态为”true“,对p1设置文本1、p2设置为本…、p3设置文本[[LVAR1.pageCount-5]]、p4设置文本[[LVAR1.pageCount-4]]、p5设置文本[[LVAR1.pageCount-3]]、p6设置文本[[LVAR1.pageCount-2]]、p7设置文本[[LVAR1.pageCount-1]]、p8设置文本[[LVAR1.pageCount]],设置中继器当前页面为[[LVAR1]],
    载入时设置 当前元件文本[[LVAR1.pageCount]]
    如图:
    在这里插入图片描述

  • 下一页
    鼠标点击时设置,如图:
    在这里插入图片描述

  • 尾页
    鼠标点击时设置,如图:
    在这里插入图片描述

  • 整体页面
    页面加载时设置,如图”
    在这里插入图片描述
    制作完毕。

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

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

相关文章

测试找工作,如今真的一年比一年难,怎样才能打破困境?

坐标深圳,2020年6月毕业开启了社畜的模式,深圳某大型互联网码农集散基地(非大厂)学历背景:二本。 第一份工作在深圳的一个60人左右规模的小公司做软件测试。年初离职后,最近刚刚跳槽成功。 做测试是从20年…

nginx页面优化与防盗链

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 一、nginx页面优化1.版本号1.1 查看版本号1.2 修改版本号1.2.1 修改配置文件1.2.2 修改源码文件,重新编译安装 2.nginx的日志分割3.nginx的页面压缩3.1 …

宝塔面板SSL证书配置方法(Nginx及Apache环境)

宝塔面板是一款服务器管理软件,可以通过网络轻松管理服务器,提高运维效率,让用户更容易使用服务器,它可以支持Linux操作系统、Windows操作系统,是国内非常受欢迎的主机控制面板,可以通过交互界面完成服务器…

《深度学习入门:基于python的理论与实现》chap2感知机

文章目录 2.1 什么是感知机2.2 简单逻辑电路 &2.3 感知机的实现引入偏置与门 And gate与非门(NAND gate)或门 OR gate 2.4 感知机的局限性(单层感知机无法分离非线性空间)2.4.1 异或门2.4.2 线性和非线性 2.5 多层感知机(multi-layered perception)2.5.1 已有门电路的组合2…

Git 工具原理及使用 -- 基本使用

Git 工具原理及使用 – 基本使用 文章目录 Git 工具原理及使用 -- 基本使用1.创建本地仓库2.配置本地仓库3.认识工作区、暂存区、版本库4.添加文件 -- 场景一5.查看.git文件6.添加文件 -- 场景二7.修改文件8.版本回退9.撤销修改**情况一:对于工作区的代码&#xff0…

【哈士奇赠书活动 - 28期】- 〖产品经理就业实战〗

文章目录 ⭐️ 赠书 - 《产品经理就业实战》⭐️ 内容简介⭐️ 作者简介⭐️ 编辑推荐⭐️ 赠书活动 → 获奖名单 ⭐️ 赠书 - 《产品经理就业实战》 ⭐️ 内容简介 本书专门为想要入行从事产品经理相关工作的零基础就业人员而编写,涵盖了在产品准备阶段、产品开发阶…

TipDM数据挖掘建模平台产品功能特点

TipDM数据挖掘建模平台是可视化、一站式、高性能的数据挖掘与人工智能建模服务平台,致力于为使用者打通从数据接入、数据预处理、模型开发训练、模型评估比较、模型应用部署到模型任务调度的全链路。平台内置丰富的机器学习、深度学习、人工智能算法,可覆…

桥接模式(Bridge)

定义 桥接是一种结构型设计模式,可将一个大类或一系列紧密相关的类拆分为抽象和实现两个独立的层次结构,从而能在开发时分别使用。 前言 1. 问题 假如你有一个几何形状(Shape)类, 从它能扩展出两个子类&#xff1a…

2023最强免费的AI生成图像工具其1

Midjourney虽然很强,但是要钱.Stable Diffusion也很强,但是对于小白来说部署起来也是很麻烦。我们整理了一些已经上线了的,可以直接访问和使用的AI生成图像的工具网站集合。 收录到 2023 最强免费AI生成图像工具集合系列https://www.webhub1…

STM32速成笔记—RTC

文章目录 一、RTC简介二、STM32的RTC2.1 主要特性2.2 RTC框图介绍 三、访问后备区域步骤四、RTC配置步骤五、RTC程序配置5.1 RTC结构体定义5.2 RTC初始化函数5.3 设置年月日,时分秒5.4 判断闰年函数5.5 获取当前年月日,时分秒5.6 获取星期几5.7 中断服务…

【②MySQL 】:测试数据准备、SQL语句规范与基本操作

前言 欢迎来到小K的MySQL专栏,本节将为大家准备MySQL测试数据、以及带来SQL语句规范、数据库的基本操作的详细讲解~✨文末送书,小K赠书活动第二期 目录 前言一、准备测试数据二、SQL语句规范三、数据库的基本操作四、总结:文末赠书 一、准备测…

智能应急疏散系统在大型建筑中的的功能与应用

安科瑞 华楠 摘 要:随着经济的不断发展和城市化进程的推进,城市建筑逐渐发展为高层化、大型化和功能综合化,大空间的建筑物增多。为了实现以人为本,坚持可持续发展理念,保证城市建设系统的正常运行,安全防灾系统在建筑中必不可少,而火患是一项重要的防范内容,要不断…

使用RabbitMQ死信队列关闭未支付的订单

一、什么是RabbitMQ死信队列 RabbitMQ死信队列(Dead-Letter Exchange,简称DLX)是一种特殊类型的交换机,用于处理在队列中无法被消费的消息。当消息无法被消费时,它会被转发到死信队列中,以便进一步处理。 …

7-WebApis-1

Web APIs - 1 掌握DOM属性操作,完成元素内容设置,元素属性设置,控制元素样式 DOM简介获取DOM元素操作元素内容操作元素属性定时器-间隔函数综合案例 描述属性/方法效果获取DOM对象document.querySelector()获取指定的第一个元素document.que…

nuxt 设置i18n后多语言文件不会动态更新

nuxt 设置i18n后多语言文件不会动态更新 昨天遇到的一个问题,然后研究了一整天,今天才得到解决 nuxt 设置i18n多语言时多语言文件不会动态更新 我的原始代码如下: {modules: [nuxtjs/i18n,],i18n: {locales: [{code: en,iso: en-US,name:…

构建可靠软件的关键步骤之单元测试

引言:在当今快节奏的软件开发环境中,构建可靠的软件是至关重要的。单元测试作为软件开发过程中的关键步骤之一,能够帮助开发者发现和解决代码中的错误,确保代码的正确性。本文将详细介绍单元测试的概念、重要性以及如何有效地进行…

impala远程连接失败排查

周一开发反馈在本地电脑上连接impala失败,怀疑是服务问题。测试后发现服务正常,故障也恢复了,就没追究,第二天又出现相似的故障。服务依然正常。怀疑是网络问题。联系网络同事排查。telnet通。网络负载也不是很高,搁置…

档案库房温湿度标准及措施【档案八防十防解决方案】

档案馆库房温湿度调控标准及相应的措施方案 档案库房是档案保管的基本条件,档案库房温湿度与保护档案,延长档案寿命有很大关系。 档案库房适宜温湿度标准为:温度14℃—24℃,相对湿度45%一60 一、库房温湿度对档案的影响…

基于Arduino单片机超声波测距仪设计

文章目录 摘 要 1.课程设计任务 1.1课程设计题目 1.2设计的要求 2.设计总体方案 2.1初步设计方案 2.2各个单元电路的设计要求 2.3主要性能指标 2.4总体方案 3.单元模块设计 3.1显示模块 3.2超声波测距模块 3.3蜂鸣器模块 3.4电机模块 3.5 LED二极管模块 4.软件…

【三维编辑】Editing Conditional Radiance Fields 编辑条件辐射场

Editing Conditional Radiance Fields(ICCV 2021) 作者单位:Steven Liu, Xiuming Zhang, Zhoutong Zhang, Richard Zhang MIT, Adobe Research, CMU 代码地址:https://github.com/stevliu/editnerf 文章目录 摘要前言一、相关工作…