Axure实现Tab选项卡切换功能


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

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

        具体实现步骤如下:

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

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

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

        Axure实现Tab选项卡切换功能_第1张图片

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

        Axure实现Tab选项卡切换功能_第2张图片

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

         Axure实现Tab选项卡切换功能_第3张图片

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

                 

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

        Axure实现Tab选项卡切换功能_第4张图片

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

        Axure实现Tab选项卡切换功能_第5张图片

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

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

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

       Axure实现Tab选项卡切换功能_第6张图片

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

       Axure实现Tab选项卡切换功能_第7张图片

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

       

       小技巧

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

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




你可能感兴趣的:(--------【,Web,前,端,】,--------【,软件,工具,】)