axure 试用版
创建一个项目,名字test;
打开默认的home页面,在右边工作区编辑该页面;
在左边的控件栏(widgets),拖动一个矩形到home页面的合适位置,设置合适大小(作为tab页面边框);
在拖动两个矩形控件到刚才的矩形上方左侧,作为tab标签,双击每个矩形,分别输入文字“tab1”,“tab2”。等一下单击矩形时切换页面。你可以选中矩形,然后右键,操作:Edit Button Shape-- >Tab Left (根据需要可选则其他形状)。
拖动控件:dynamic panel 到刚才作为页面边框的矩形中,改变控件大小适应矩形大小;
双击页面中的dynamic panel 控件,在弹出的对话框中,输入控件名称:testpanel。对话框的下部列表是控件的状态,状态是动态面板的核心概念,tab效果的实现其实是在转换面板的不同状态,每个状态可以对应一个页面,你可以在不同状态页面中设计不同的内容。通过状态切换达到显示不同的内容,也就做到了tab页的效果。状态在列表中的顺序,是默认显示顺序,比如第一个状态总是当前的状态。 默认只有一个状态,状态名称默认为state1可改名,改为TAB1,点击加号,增加一个状态,名称为 TAB2,你可以改变状态的顺序。
双击TAB1状态,系统打开一个页面,在蓝色矩形内,放置一些控件; 双击TAB2状态,系统打开另一个页面,在蓝色矩形框内放置一些控件,注意与TAB1不同,以区分;
到现在为止,基础工作已经完成,下面通过添加TAB标签(第4步创建的两个小矩形)的click事件,达到效果。选择标签为TAB1的矩形,在右边控件属性栏,点击闪电形状的按钮,再双击“OnClick”按钮,弹出事件设置对话框,在对话框中选择 set panle state(s) to state(s),中间出现事件列表(可多条,按顺序触发),在右边选择切换到哪个面板的哪个状态,此时,选择testpanel面板的TAB1(与标签对应)状态,点击OK按钮设置完毕。相同步骤设置矩形TAB2的事件。至此设计完毕;
按F5或者点击菜单“Generate”-->Prototype... 然后按提示选择生成页面路径,生成后会自动打开首页,点TAB1,TAB2对比,观察到tab页切换效果。
总结:动态面板的状态概念很重要,可以使用任何事件去切换状态,这样可以做出很多效果。