快好知 kuaihz

Axure8.0|动态面板内容简单切换技巧

无论做web段还是移动端,常常会用到动态面板固定在某个区域来变换内容,达到节省空间的作用,今天分享的就是如何实现这种方式。

预览效果:

一、元件准备

以IT/互联网、设计创作、职场金融这三组为例,所涉及到的元件分别为it1(小竖条矩形)、it(标识”IT/互联网”矩形)、 design1(小竖条矩形)、design(标识“设计创作”矩形)、 finance1(小竖条矩形)、finance(标识“职场/金融”矩形)以及最后的动态面板neirong(分为三组,名称分别对应it、design、finance)。

注:小竖条矩形默认颜色是灰色的,这里填充颜色只是为了看清楚。

二、添加事件

1,将三个小竖条矩形设置选项组,名称为“标记”,并且分别添加选中事件:填充颜色 #2CC27B。

2,将三个矩形设置选项组,名称为“课程”,并且分别添加选中事件:填充颜色 白色。

释:这里设置选项组的目的是为了当点击其中一个为选中时,其他两个就会变为不选中。

3,鼠标单击 “it(IT/互联网)” 设置动态面板neirong ,选择状态 Value,状态名称 [[this.name]];

选中 it1和it。

将it的鼠标单击事件复制然后粘贴到“desgin(艺术设计)”、finance(职业/金融),且分别将选中对应改为 design1和design、finance1和finance。

4,针对上下拖动动态面板而不超出框架这一实现方式可以参考上一期的 Axure8.0|移动端上下滑动不出屏  。

三、效果

具体效果请点击右侧网址 http://67r9k4.axshare.com/#g=1&p=index 。

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:面板  面板词条  切换  切换词条  简单  简单词条  技巧  技巧词条  动态  动态词条  
原型

 如何用AXURE做出密码可见/隐...

如何用AXURE做出密码可见/隐藏的交互效果?本文将用实例为大家作出解答。很多时候,我们发现一些网站的登录页面,密码输入框栏目右侧,有一只可点击的眼睛开关,或者...(展开)