Axure实现Tab选项卡切换功能

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

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

详细实现过程例如以下：

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

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

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

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

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaHV5dXlhbmc2Njg4/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

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

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaHV5dXlhbmc2Njg4/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

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

 
 

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaHV5dXlhbmc2Njg4/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">    
 

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

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

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

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

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

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaHV5dXlhbmc2Njg4/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

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

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

小技巧

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

如今在Axure的官网上也能够下载tab控件的插件。当中不乏一些功能强大的、美观大气的控件哦。点击跳到下载页面