自己无意间发现了做原型设计的工具--Axure,所以就自学了一点皮毛。最近时间比较充裕,就把自己现学现卖的东西整一整。

作品比较简单,没有技术可言,根据用户和开发需求,利用动态面板和一些点击事件完成了一系列流程。

主要效果是:左侧点击Taxonomy触发对导航栏的管理,可以切换导航栏视图;树状菜单导航栏与右侧数据联动;右侧数据的鼠标点击事件;

界面效果如图:

一.利用树状菜单形成左侧导航栏

步骤如下:

1.选择添加菜单原件:树状菜单。通过拖拽形式插入树状菜单

2.编辑树状结构:右键点击树状菜单,添加其子节点或者同级结点

二、右侧表单数据及数据操作

Axure中表格或者表单无合并单元格的操作,在设计绘制时需要结合矩形原件对表格线条进行遮盖,从而达到合并单元格效果。

1.绘制表格

在原件库中选择“表格”,拖拽到位置,编辑数据

2.为数据添加用例,即实现点击数据页面跳转

要实现点击表格数据调整页面的操作,需要给表格数据添加用例即鼠标点击事件。

点击数据单元格,右侧工作区选择“鼠标点击时”,添加用例:新窗口/标签打开链接。

*添加用例时可以选择链接到本项目或者URL或者文件

三、树状结构与右侧的联动

1.右键点击右侧表格,将表格转换为动态面板。双击动态面板,进入动态面板管理器,添加多个面板状态。如下图:三个动态面板状态:1,2,3.

2.设置面板状态

在动态面板管理中单击状态,进入状态编辑,对状态内容进行编辑

3.点击左侧树状菜单的菜单项,添加“鼠标点击时”用例,选择动态面板。

四、发布

点击Axure中菜单栏里的

以上四步实现了动态面板和树状菜单的联动,步骤比较粗略。

初步学习Axure---整理了一下自己两周的学习成果:动态面板的更多相关文章

  1. React 入门学习笔记整理目录

    React 入门学习笔记整理(一)--搭建环境 React 入门学习笔记整理(二)-- JSX简介与语法 React 入门学习笔记整理(三)-- 组件 React 入门学习笔记整理(四)-- 事件 R ...

  2. (转).net开发者对android第二周的学习体会

    这一周相对没有春节时这么闲了,白天也比较多的工作要做,每天晚上又要被我三岁的女儿折腾到十点, 实在没有多少时间学习.在前一周的基础上,这周我试着自己练习写了一个个人管理的android的程序,主要实现 ...

  3. Axure 动态面板的状态与尺寸

    知识点: 1.动态面板的状态下相当动态面版的模式,当符合某种条件的话就选择对应的动态面板的状态 2.动态面板的尺寸可以根据内容自动调整大小 本节教程主要分为一下图片两种场景: 出现动态面板中的两种.一 ...

  4. UWP学习目录整理

    UWP学习目录整理 0x00 可以忽略的废话 10月6号靠着半听半猜和文字直播的补充看完了微软的秋季新品发布会,信仰充值成功,对UWP的开发十分感兴趣,打算后面找时间学习一下.谁想到学习的欲望越来越强 ...

  5. Deep Learning(深度学习)学习笔记整理系列之(五)

    Deep Learning(深度学习)学习笔记整理系列 zouxy09@qq.com http://blog.csdn.net/zouxy09 作者:Zouxy version 1.0 2013-04 ...

  6. Deep Learning(深度学习)学习笔记整理系列之(七)

    Deep Learning(深度学习)学习笔记整理系列 zouxy09@qq.com http://blog.csdn.net/zouxy09 作者:Zouxy version 1.0 2013-04 ...

  7. Deep Learning(深度学习)学习笔记整理系列之(六)

    Deep Learning(深度学习)学习笔记整理系列 zouxy09@qq.com http://blog.csdn.net/zouxy09 作者:Zouxy version 1.0 2013-04 ...

  8. Deep Learning(深度学习)学习笔记整理系列之(四)

    Deep Learning(深度学习)学习笔记整理系列 zouxy09@qq.com http://blog.csdn.net/zouxy09 作者:Zouxy version 1.0 2013-04 ...

  9. Deep Learning(深度学习)学习笔记整理系列之(三)

    Deep Learning(深度学习)学习笔记整理系列 zouxy09@qq.com http://blog.csdn.net/zouxy09 作者:Zouxy version 1.0 2013-04 ...

随机推荐

  1. Codeforces Round #406 (Div. 2) 787-D. Legacy

    Rick and his co-workers have made a new radioactive formula and a lot of bad guys are after them. So ...

  2. 51nod1183 编辑距离【动态规划】

    编辑距离,又称Levenshtein距离(也叫做Edit Distance),是指两个字串之间,由一个转成另一个所需的最少编辑操作次数.许可的编辑操作包括将一个字符替换成另一个字符,插入一个字符,删除 ...

  3. [luogu1627 CQOI2009] 中位数 (乱搞)

    传送门 Solution 好水的题(ーー;) Code //By Menteur_Hxy #include <map> #include <queue> #include &l ...

  4. 38.mapping小例子

    主要知识点 初步了解mapping     一,准备数据 插入几条数据,让es自动为我们建立一个索引     PUT /website/article/1 { "post_date" ...

  5. vue中的slot理解和使用

    最近被vue 搞得一塌糊涂,理解的比较慢,工作进度进度要求太快,需求理解不明,造成了很大的压力. 在理解Vue中的Slot的时候看了网上的相关内容,看了半天没看到明白说的是什么,然后自己就安装了vue ...

  6. FreeMarker基本使用

    FreeMarker是一个模板引擎,一个基于模板生成文本输出的通用工具,使用纯Java编写 l         FreeMarker被设计用来生成HTML Web页面,特别是基于MVC模式的应用程序 ...

  7. Game with a Strip

    Game with a Strip Time limit: 2.0 secondMemory limit: 64 MB There is a strip 1 × n with two sides. E ...

  8. AOJ 0121 Seven Puzzle {广度优先搜索}(*)

    原题 题意 题意是有一个输入,比方: 1 0 2 3 4 5 6 7 摆成例如以下形状: 1 0 2 3 4 5 6 7 0表示空格.其它数字能够移动到0的位置.最后须要到例如以下形状: 0 1 2 ...

  9. java内存结构(执行时数据区域)

    java虚拟机规范规定的java虚拟机内存事实上就是java虚拟机执行时数据区,其架构例如以下: 当中方法区和堆是由全部线程共享的数据区. Java虚拟机栈.本地方法栈和程序计数器是线程隔离的数据区. ...

  10. Chrome(谷歌浏览器) 程序开发32个经常使用插件

    Chrome(谷歌浏览器) 程序开发32个经常使用插件                   谷歌浏览器(Chrome)在2008年底才公布.但非常快它已成为火狐(Firefox)有力竞争对手. 之前. ...