码迷,mamicode.com
首页 > 其他好文 > 详细

Axure实现Tab选项卡切换功能

时间:2014-11-18 01:41:06      阅读:188      评论:0      收藏:0      [点我收藏+]

标签:axure tab   axure选项卡   


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

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

        具体实现步骤如下:

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

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

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

        bubuko.com,布布扣

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

        bubuko.com,布布扣

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

         bubuko.com,布布扣

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

        bubuko.com,布布扣   bubuko.com,布布扣   bubuko.com,布布扣   bubuko.com,布布扣

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

        bubuko.com,布布扣

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

        bubuko.com,布布扣

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

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

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

       bubuko.com,布布扣

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

       bubuko.com,布布扣

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

       

       小技巧

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

        




Axure实现Tab选项卡切换功能

标签:axure tab   axure选项卡   

原文地址:http://blog.csdn.net/huyuyang6688/article/details/41043255

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!