Axure产品设计原型之--toggle，页面跳转，页面滚动

很多好的案例分享在这里----http://www.webppd.com/forum-4-1.html
这个案例很好---http://http://162i93.share.axure.org/#g=1&p=%E7%82%B9%E6%BB%B4%E5%8E%9F%E5%9E%8B

安装axure8.0
安装汉化包

image.png

这是界面

image.png

做了四个元素，最上一层是动态面板，点击“视图”--“功能区”--“概要”，可以隐藏掉暂时不用的图层，利于我们制作

image.png

1.页面上下滚动

image.png

1）创建最外层包裹容器，一个动态面板，双击该面板，出现如下弹出框，命名content，content包含的子集叫content-item

image.png

2）双击content-item进入，我们再在content-item上放一个长长的动态面板

image.png

3）双击该动态面板content-itemD的state1进入，放内容

image.png

4）关键点在这里。打开content-item，设置它的拖动动作。

image.png

然后我们点击右上角“预览”，发现效果不太好，可以垂直拖动但是会拖出头，拖出尾

image.png

5）双击进入，我们需要加一个限制

image.png

image.png

header应该是<=0的哈，图错了
这样就可以有边界的上下滚动长内容，不至于让它滚出去

2.点击跳转页面

image.png

3.点击显示隐藏

image.png

image.png

初始化是menuCon不可见，所以选中menuCon，右击--‘设为隐藏’

问题是，很多类似交互是toggle方式做的，同一个按钮要控制俩种状态
此时

image.png

反推，应该还添加一个点击事件：当menuCon可见时，让它隐藏
就是这样啦

image.png

4.切换页面效果

image.png

content动态面板框中放了三个state，state1（粉色），state2（绿色），state1（橘色）
header上放了三个按钮分布控制
挑一个说，green吧
看点击green，动态面板发生的页面切换效果

image.png

看点击green，green按钮本身发生的效果，

类似于咱们$(this).addClass('active').siblings().removeClass('active');的操作

image.png

接着设置自己的选中样式

学习其他操作再来分享哈~~