Axure实现Tab选项卡切换功能

简介: 这几天用Axure画原型图的过程中,需要实现Tab选项卡切换的效果,但Axure中并没有类似于Tab控件的部件,所以可以用Axure中的动态面板(Dynamic Panel)来实现。 本文以已经汉化的Axure7.0为例,英语不太好的朋友可以先进行汉化(汉化的时候要注意版本,不同的版本,汉化文件也稍有差异)。

      这几天用Axure画原型图的过程中,需要实现Tab选项卡切换的效果,但Axure中并没有类似于Tab控件的部件,所以可以用Axure中的动态面板(Dynamic Panel)来实现。


      本文以已经汉化的Axure7.0为例,英语不太好的朋友可以先进行汉化(汉化的时候要注意版本,不同的版本,汉化文件也稍有差异)。


       具体实现步骤如下:


       1、往页面中拖入一个动态面板部件;


       2、给该动态面板部件添加几个状态;


       操作方法为:双击该动态面板,点击左侧的加号添加状态,这里把四个添加的状态名称改为“选项卡1、选项卡2……”


31.png


     单击确定,此动态面板就拥有了4个状态,每个状态分别对应一个选项卡页面:


32.png


       3、编辑每个状态(选项卡)的页面内容(这里可以先在选项卡1中编辑每个选项卡中的公共内容),双击选项卡1,进入对状态的编辑页面,向页面中拖入一个矩形(作为选项卡的主体面板)和4个图片控件:


33.png

    这里为了显示效果,做了四张作为选项卡表头的图片,四张图片底部都没有边框:

36.png35.png36.png67.png


       将这四张图片上传后调整图片与矩形的位置(让矩形的上边框挡住四张图片的下边框)与层次(将矩形置于顶层),直至效果为:


37.png


       再将选项卡1的层次置于顶层,为了标识,矩形中拖入需要在选项卡1中放置的内容(这里拖入一个单行文本):

38.png

       此时的页面就达到了选项卡1的效果,然后均按照此方法修改选项卡2、选项卡3、选项卡4。每个选项卡(也就是状态)中矩形中的内容就是每个选项卡要显示的主体内容。


      4、设置选项卡之间的动态跳转:


      在选项卡1中,点击图片选项卡1,为它添加鼠标单击事件


39.png


      新增动作为动态面板下的“设置面板状态”,动作为设置状态到选项卡1,如下图:

40.png


     此时,运行一下就可以实现点击“选项卡1”就切换到选项卡1的面板的效果,同样方法设置其他三个按钮。


   


      小技巧


      上例的四个选项卡就是动态面板的四个状态,这几个状态有一些公共的内容,比如选项卡的四个按钮(即上例中的四张图片)和各个按钮相应的单击事件,所以为了高效省时,可以先做出一个选项卡的内容来,然后可以直接将这个选项卡的公共内容部分复制到其他选项卡中,这样也可以避免位置调整不佳而导致点击每个选项卡切换时会来回“跳动”(在Axure中从一处复制内容到另一处时,内容本身的属性、事件、坐标等性质均不变)。


         现在在Axure的官网上也可以下载tab控件的插件,其中不乏一些功能强大的、美观大气的控件哦。点击跳到下载页面        


相关文章
|
API Android开发 iOS开发
web: 手机键盘自动获取短信验证码,点击自动填充输入框
web: 手机键盘自动获取短信验证码,点击自动填充输入框
1144 0
|
Windows
windows、mac的xmind破解安装教程 2022-08-19最新亲测有效
XMind 8 Pro中文版是一款界面直观、专业出众、覆盖范围广阔的思维导图软件。XMind 8 Pro中文版功能强大为用户提供组织结构图、树状图、逻辑图,将画布概念管理从而引导思维导图层次化。XMind 8 Pro官方版将用户大脑中思维想法通过导图方式完美地展现出来,其思维导图与其他导图图表等更是简单易用,帮助用户在学习和工作中提高自身效率!
2848 0
windows、mac的xmind破解安装教程 2022-08-19最新亲测有效
|
云栖大会 BI 决策智能
开放下载!阿里云数据中台全系白皮书,一次性放送19本,速速收藏
2020云栖大会“阿里云数据中台”会场全面推出数据中台全系白皮书,全面了解阿里云数据中台,尽在阿里云数据中台系列白皮书!
37742 0
开放下载!阿里云数据中台全系白皮书,一次性放送19本,速速收藏
|
分布式计算 并行计算 数据库
Schedulerx2.0分布式计算原理&最佳实践
1. 前言 Schedulerx2.0的客户端提供分布式执行、多种任务类型、统一日志等框架,用户只要依赖schedulerx-worker这个jar包,通过schedulerx2.0提供的编程模型,简单几行代码就能实现一套高可靠可运维的分布式执行引擎。
26125 2
|
12月前
|
数据可视化 Linux iOS开发
(2024年)Typora-最新版安装(1.8.10)
Typora是一款高效、简洁且功能强大的Markdown编辑器,支持Windows、MacOS及Linux系统,并实现可视化编辑,同一窗口实时呈现编辑效果。相较于传统Markdown编辑器,Typora的界面更为直观易用,极大地提升了编辑效率。用户可在官网(https://typoraio.cn/)下载安装包进行安装。
439 5
|
9月前
|
供应链 监控 数据可视化
物联网技术在物流与供应链管理中的应用与挑战
本文探讨了物联网技术在物流与供应链管理中的应用,通过实时追踪、信息共享、智能化决策等手段,大幅提升了管理效率和智能化水平。特别介绍了板栗看板作为专业可视化工具,在数据监控、分析及协同作业中的重要作用。未来,随着技术的进一步发展,物流与供应链管理将更加智能高效,但也面临数据安全、标准化等挑战。
|
网络安全
mac下通过ssh脚本实现免账号密码连接运服务器
mac下通过ssh脚本实现免账号密码连接运服务器
143 3
|
分布式计算 监控 大数据
任务调度scheduleX
【8月更文挑战第22天】
1956 0
XMind2022最新版破解激活教程,亲测可用
Xmind 是一款 全功能 的思维导图和头脑风暴软件。像大脑的瑞士军刀一般,助你理清思路,捕捉创意。
14670 1
|
存储 编译器 定位技术
结构体数组在C语言中的应用与优化策略
结构体数组在C语言中的应用与优化策略