详解使用Axure 制作Tab切换功能


我也是刚刚接触Axure,这个工具和HTML+CSS+JS作出的东西,在功能上基本在表面上没啥区别。对于不懂得技术的童鞋,简直就是福音。

楼主,也是看了,英文版的教程,一步一步去做。这个是英文版的地址

http://www.axure.com/learn/dynamic-panels/basic/tab-control-tutorial

开始了

1下载安装Axure

进入Axure英文网地址http://www.axure.com/,下载Axure

2 开始制作Tab 切换

2.1将一个矩形格式为一个Tab

首先,添加一个矩形空间到线框图中,点击鼠标右键选择 Edit Button Shape>Select Shape>Rounded Top.

2.2 编辑tab被选择时的样式

为了区分默认tab和已选tab的不同,点击鼠标右键选择Edit Button Shape > Edit Selected Style.

勾选 Fill Color 这个属性,点击右边的油漆桶选择颜色。

2.3复制、黏贴tab,将tab分组并命名

复制两次矩形空间,使得矩形数量有三个

为了确保在同一个时间,只能选择一个Tab,点击鼠标右键选择Edit Button Shape > Assign Selection Group,命名已选择的组名称为“TabGroup1”,点OK。

在你的组件属性中标记你的组件(给你的组件起个名字),例如是Tab1,Tab2,Tab3.完成之后,在组件上给每个矩形组件标名字,Tab 1,Tab 2,Tab3.

2.4添加一个动态面板,给他三种状态

托另一个矩形到线框图中,右键鼠标右键 Convert > Convert to Dynamic Panel.

为了确保动态面板的顶部能和tab的底部重叠在一切,在动态面板上右键鼠标右键Order > Send to Back ,用键盘的向上键将动态面板上移一个像素。

在动态面板的管理中,标记这个面板为TabDynamicPanel1. 新增两外两个状态给这个面板。默认的,这个面板的三个状态被标记为State1, State2, and State3

2.5给每个状态添加矩形控件

打开State1,选择这个矩形,并且拷贝它;

将这个矩形黏贴在其余两个状态下相同的位置。

在每个矩形上输入文字Pane 1, Pane 2, and Pane 3

2.6添加 OnClick事件

选择Tab1,编辑他的click事件。第一步,选择动作“Set Widget(s) to Selected State,” 并且在已选状态中选择“State1”.接着,选择动作“Select the value,”默认菜单选择“Selected,

重复上面的动作,为Tab2,Tab3添加动作。

2.7为页面载入时,设置动态tab

页面载入时,默认第一个Tab1被选中

在页面的Interactions tab.中选择“OnPageLoad”,选择动作“Set Widget(s) to Selected State”,并且选择Tab1 (Button Shape).重复这样的动作,为TAb2,TAb3添加动作。

2.8生成原型

生成原型并测试

优质内容筛选与推荐>>
1、程序员的追求是什么?
2、人生新的一页已经翻开
3、初始化单链表,并在只遍历一次的情况下倒序
4、CSS3高级
5、maven环境配置--IDEA


长按二维码向我转账

受苹果公司新规定影响,微信 iOS 版的赞赏功能被关闭,可通过二维码转账支持公众号。

    阅读
    好看
    已推荐到看一看
    你的朋友可以在“发现”-“看一看”看到你认为好看的文章。
    已取消,“好看”想法已同步删除
    已推荐到看一看 和朋友分享想法
    最多200字,当前共 发送

    已发送

    朋友将在看一看看到

    确定
    分享你的想法...
    取消

    分享想法到看一看

    确定
    最多200字,当前共

    发送中

    网络异常,请稍后重试

    微信扫一扫
    关注该公众号