Axure实现Tab选项卡切换功能

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://cloud.tencent.com/developer/article/1336923

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

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

        具体实现步骤如下：

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

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

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

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

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

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

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

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

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

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

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

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

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

       小技巧

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

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