Axure如何实现Tab选项卡切换功能
关关 2018-08-21 来源 : 阅读 1475 评论 0

摘要:本篇Axure教程探讨了Axure如何实现Tab选项卡切换功能,希望阅读本篇文章以后大家有所收获,帮助大家对Axure的掌握更加深入。

本篇Axure教程探讨了Axure如何实现Tab选项卡切换功能,希望阅读本篇文章以后大家有所收获,帮助大家对Axure的掌握更加深入。

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

        详细实现过程例如以下:

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

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

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

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

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

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

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

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

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

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

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

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

       此时,执行一下就能够实现点击“选项卡1”就切换到选项卡1的面板的效果,相同方法设置其它三个button。

       小技巧

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


       本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标常用软件Axure频道!

本文由 @关关 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程