Axure实现Tab选项卡切换功能

àì夳堔傛蜴生んèń 2022-08-13 19:45 278阅读 0赞

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

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

具体实现步骤如下：

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

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

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

![Center][]

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

![Center 1][]

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

![Center 2][]

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

![Center 3][]   ![Center 4][]   ![Center 5][]   ![Center 6][]

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

![Center 7][]

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

![Center 8][]

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

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

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

![Center 9][]

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

![Center 10][]

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

小技巧

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

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

[Center]: /images/20220810/1b23f03a1ae740c4966bed3ba924bb9d.png
[Center 1]: /images/20220810/5ce3fac42c2d4f688a7e947caf4548ee.png
[Center 2]: /images/20220810/58c6abe4eadf491586c2550f16cca577.png
[Center 3]: https://img-blog.csdn.net/20141116184106363?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaHV5dXlhbmc2Njg4/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 4]: https://img-blog.csdn.net/20141116184125894?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaHV5dXlhbmc2Njg4/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 5]: https://img-blog.csdn.net/20141116184210359?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaHV5dXlhbmc2Njg4/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 6]: /images/20220810/d6396a90666547fdafb1b7109d6a4f49.png
[Center 7]: /images/20220810/5617b1fd9eae4ba29302c48e4be8169b.png
[Center 8]: /images/20220810/6b29acc1a1cb4d7e8f6186a66495b561.png
[Center 9]: /images/20220810/aff88c25c2b0407f8ff51ef58127eebb.png
[Center 10]: /images/20220810/f4fd498fb0df49acb33a31caa8b73a24.png
[Link 1]: http://www.axure.com/community/widget-libraries