中年|Axure9原型设计：动态面板&内联框架实现可复用导航页
编辑导读：在导航页面的时候 ， 怎么尽可能复用 ， 减少无谓的复制黏贴？动态面板和内联框架可以帮助实现 。 本文作者根据自身经验 ， 从两个方面进行分析 ， 希望对你有帮助 。
【中年|Axure9原型设计：动态面板&内联框架实现可复用导航页】
本文插图
上次分享的《Axure9原型设计：动态面板实现手风琴菜单（低配版）》 ， 只是实现了导航栏 ， 但是页面不止导航栏 ， 就像写代码一样 ， 怎么尽可能复用 ， 减少无谓的复制黏贴？那就必须配上内联框架 。 这次就用动态面板和内联框架实现可复用导航页 ， 而且要尽可能简单 。
步骤如下：
一、拖拉元件
摆出首页常见样式的一级菜单 ， 简单起见 ， 直接拖拉 ， 不用放到别的容器里 。 为了后面交互方便 ， 每个元件都有命名 ， 包括“ⅴ”（命名是个好习惯 ， 为了我们交互时可以清晰看到元件名称 ， 且方便检查逻辑） 。
本文插图
拉出动态面板 ， 命名：手风琴二级菜单 ， 设置不可见和自适应内容 。 并添加4个状态页 ， 每个状态页都跟对应的一级菜单命名对应 。
本文插图
右边 ， 头部拉出一个文本框命名Title ， 用来显示每个菜单的路径 ， 下面一个内联框架 ， 内联框架设置隐藏边框 。
添加二级菜单对应的页面 ， 以及页面内容 ， 页面名称和菜单名称是一致的 ， 这个就略过 。
二、添加交互
给一级菜单添加“单击”交互 ， 4个一级菜单内容大同小异 ， 而且Axure9可以复制粘贴交互代码 ， 非常方便 。
逻辑：单击时如果动态面板不可见则可以看见动态面板 ， 并且移动到对应一级菜单的坐标下 ， 并推动下方元件改变布局 ， 旋转小箭头180°；再次点击则收起动态面板 。
本文插图
给二级菜单添加“单击”交互 ， 这个就更得复制粘贴了 ， 不知道其他同学是怎么搞的 ， 菜单越多重复操作就越多（遇到重复枯燥的操作就不自主想代码是怎么实现的） 。
逻辑：单击时在内联框架中显示对应的二级菜单页面 ， 并且设置Title显示菜单的路径 ， 取得都是元件的text值拼接起来 。
本文插图
就这样 ， 就2个事件 ， 不过这个示例不能同时展开多个二级菜单 ， 不嫌麻烦的话 ， 可以把动态面板分开 ， 而不是在一个动态面板用多个状态 。 其实只要有了思路 ， 实现方式感觉千篇一律 。
效果：https://e6osrz.axshare.com
题图来自Unsplash ， 基于CC0协议 。
推荐阅读
- 人到中年想长寿，要坚持吃3种食物，排毒养颜，好吃又健康！
- 马斯克|马斯克透露SpaceX星际飞船原型SN10即将爆炸的早期迹象
- 国内最好吃的淡水鱼，中年人也许听过吃过，90后都不懂
- “天然黄体酮”被发现，女人到中年一定要多吃，50岁还不显老！
- spacex公司|SpaceX星舰原型SN11已运到发射平台 即将测试起飞
- 高脂血症|人到中年，4大“升脂大户”最好少吃，预防血管堵塞
- 马斯克|又炸了！原型飞船着陆数分钟突然爆炸，马斯克却表现得异常淡定
- 三水|人到中年，多事之秋，不喝“三水”、不食“三物”、不忘“三事”
- space x|Space X原型机爆炸之际，日本富翁还想乘坐它去月球：诚邀8位勇士
- 脚气性心脏病|杭州中年男子突发休克，他得的脚气性心脏病来了解下