自己无意间发现了做原型设计的工具--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. Nginx服务(端口80)

    Nginx安装: 一.编译安装 1.安装相应软件 yum install pcre pcre-devel openssl openssl-devel -y 2.检查: rpm -aq pcre pcr ...

  2. BZOJ 4567 [SCOI2016]背单词 (Trie树、贪心)

    题目链接: https://www.lydsy.com/JudgeOnline/problem.php?id=4567 题解: 显然答案一定小于\(n\times n\), 字符串倒过来变成前缀建Tr ...

  3. Apache Shiro教程

    跟开涛学系列: 来自开涛的Apache Shiro教程:http://jinnianshilongnian.iteye.com/blog/2018398 附带的代码例子:https://github. ...

  4. HDU 4513 manacher

    Manacher算法,相当于求回文串. 关于Manacher,转 http://blog.sina.com.cn/s/blog_70811e1a01014esn.html 现在进入正题:首先,在字符串 ...

  5. php抓取网页

    用php抓取页面的内容在实际的开发其中是很实用的,如作一个简单的内容採集器,提取网页中的部分内容等等.抓取到的内容在通过正則表達式做一下过滤就得到了你想要的内容.下面就是几种经常使用的用php抓取网页 ...

  6. 【LeetCode OJ 136】Single Number

    题目链接:https://leetcode.com/problems/single-number/ 题目:Given an array of integers, every element appea ...

  7. HDU-5310-Souvenir(C++ && 简单数学题)

    Souvenir Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Others) Total ...

  8. ScalaChina: Scala中文社区

    给大家推荐一个很常使用心的Scala中文社区 ScalaChina地址:http://scalachina.org/ 来自社区创建者的<我为什么想做ScalaChina>: http:// ...

  9. luogu1890 gcd区间

    题目大意:给定一行n个正整数a[1]..a[n].m次询问,每次询问给定一个区间[L,R],输出a[L]..a[R]的最大公因数. 因为gcd满足交换律和结合律,所以用线段树维护区间上的gcd值即可. ...

  10. vue组件的3种书写形式

    第一种使用script标签 <!DOCTYPE html> <html> <body> <div id="app"> <my- ...