首页 > 代码库 > Axure实现Tab选项卡切换功能
Axure实现Tab选项卡切换功能
这几天用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选项卡切换功能