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控件的插件,其中不乏一些功能强大的、美观大气的控件哦。点击跳到下载页面        


相关文章
|
JavaScript
tab选项卡切换时echarts无法正常加载显示问题的解决方案
tab选项卡切换时echarts无法正常加载显示问题的解决方案
453 0
JavaScrip - tab栏切换案例
JavaScrip - tab栏切换案例
103 0
tab栏切换制作(点击那一栏显示那一栏的内容,其他栏的内容隐藏)
tab栏切换制作(点击那一栏显示那一栏的内容,其他栏的内容隐藏)
tab栏切换制作(点击那一栏显示那一栏的内容,其他栏的内容隐藏)
|
前端开发 索引
前端实现tab栏切换,这么常见的案例你学会了吗?
tab栏切换制作是我们web开发中一个十分常见的案例,今天在这里写写,希望对大家有所帮助,还是要用到我们上节写到的排他思想!好好学哦!
942 0
前端实现tab栏切换,这么常见的案例你学会了吗?
Typora侧边栏的大纲视图折叠( win系统 )
Typora侧边栏的大纲视图折叠( win系统 )
609 0
Typora侧边栏的大纲视图折叠( win系统 )
|
Android开发
Fragment实现微信Tab界面(不可通过界面左右拖动切换界面,只可以由按钮切换)
Fragment实现微信Tab界面(不可通过界面左右拖动切换界面,只可以由按钮切换)
3177 0
IDEA 隐藏编辑器顶部 Tab 栏
版权声明:本文首发 http://asing1elife.com ,转载请注明出处。 https://blog.csdn.net/asing1elife/article/details/82711391 ...
1674 0