Axure 教程,如何在 Axure 中使用 JavaScript 实现浏览器全屏模式?
发布时间:2022-12-27 20:26:35
欢迎观看 Axure 教程,小编带大家学习 Axure 的基本工具和使用技巧,了解如何在 Axure 中使用 JavaScript 实现浏览器全屏模式。
在设计大屏模板时,需要使用浏览器全屏模式来展示模板。通常需要通过键盘上的F11来切换浏览器全屏模式。 但是,很多用户并不理解通过F11可以实现全面屏,给产品设计沟通带来不便。
现在让我们学习如何使用 JavaScript 实现浏览器全屏模式。
什么是 JavaScript?
JavaScript 是一种脚本语言。 通常浏览器使用它来实现交互效果。 在 Axure 生成的 HTML 原型中,交互效果是通过 JavaScript 代码实现的。 Axure 还提供了引用 JavaScript 代码的方法。
小部件设置
1. 设计一张卡片并将其创建为动态面板,然后固定到浏览器,中心和中间。
2.使用按钮链接创建一个动态面板并将其命名为「进入/退出全屏模式」。状态 1 的按钮文本是进入全屏模式, 状态 2 的按钮文本是退出全屏模式。
点击「进入/退出全屏模式」动态面板状态1的进入全屏模式按钮设置点击,「打开链接」-「链接到外部URL」-在「fx输入」中输入以下代码:
javascript: 函数 requestFullScreen(element) { var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen; if (requestMethod) { requestMethod.call(element); } else if (typeof window.ActiveXObject !== "undefined") { var wscript = new ActiveXObject("WScript.Shell"); if (wscript !== null) { wscript.SendKeys("{F11}"); } } }; requestFullScreen(document.documentElement);
点击「进入/退出全屏模式」动态面板状态2的「退出全屏模式」按钮设置点击事件,「打开链接」-「链接到外部URL」-在「fx输入」中输入以下代码:
javascript: 函数 exitFull() { var exitMethod = document.exitFullscreen || 文档.mozCancelFullScreen || document.webkitExitFullscreen || document.webkitExitFullscreen; if (exitMethod) { exitMethod.call(document); } else if (typeof window.ActiveXObject !== "undefined") { var wscript = new ActiveXObject("WScript.Shell"); if (wscript !== null) { wscript.SendKeys("{F11}"); } } }; 退出全();
这样就完成了所有的设置。
猜你喜欢
- WPS2019存货盘点与账面调节表模板怎么制作?wps2019中想要制作一个存货盘点与账面调节表,该怎么制作这个模板呢?下面我们就来看看详细
- 一个论坛上的会员有如下的要求:如图需要把当前路径中的财务、采购、工厂、计划、人士等工作簿的“出勤明细”工作表的记录复制汇总在“加班汇总表”工
- 有时候表格弄好了却发现打印出了问题,下面小编为大家介绍如何将wps表格缩印。1.例如在WPS表格中有如下图所示的工作表。2.打印预览发现,所
- 在Excel中求和是很常见的,那么你知道如何递增求和呢?下面教大家递增求和的方法,掌握起来又是一个新技巧。Excel递增求和像下图我们要递增
- 在Word2007文档中,当鼠标指针指向超链接时默认将显示链接地址。不过用户可以根据需要自定义超链接屏幕提示文字。在Word2007文档中,
- 1、首先,打开你要用的Excel表格。我用学生月考成绩趋势分析来举例创建迷你图。如图所示,打开数据表格。2、接下来,定位一个单元格使之成为活
- 当在Excel中新建或刷新数据透视表时,默认数据透视表中含有标题的列会自动调整为最合适列宽。有时需要让数据透视表保持固定的列宽,例如要在某个
- excel公式不自动计算该怎么办?在使用excel表格计算数据的时候,发现,数据根本就没有计算,这是怎么回事?今天我们就来教大家解决exce
- 很快就到 9 月份,苹果就要发布新款 iPhone 11 并带来 iOS 13 的正式版,但是就在今天,苹果突然发布了 iOS 12 的新版
- 去英文方法一: 第一步:“编辑”-“查找”-“替换”—打开“查找与替换”对话框-“高级” 第二步
- Excel中的状态栏如果不显示自动求和具体该如何解决呢?下面是由小编分享的excel2003状态栏不显示自动求和的解决方法,以供大家阅读和学
- wps作为一款热门的办公软件,给用户带来了十分实用的小工具以及强大的功能的等,几乎用户想到的编辑文件的格式的功能,在wps中都是存在的,满足
- 现在 黉舍都 成立了 本人的网站, 按照各 地区 教诲 当代化的 请求,要将班级的主页、 教师的博客链接到网站中, 操纵起来很 费事,而最
- 最近一些用户反馈说不知道Word如何用快捷键快速修改文字格式;很苦恼!下面小编就带来大家Word用快捷键快速修改文字格式的方法!一起去看看吧
- 有时我们在Word文档中需要添加一条分隔线来区分不同的内容,绘制分隔线最普通的方法是通过绘图工具栏中的直线工具来画。其实,有一个更简单的办法
- 在创建的图表中, 坐标轴标签显示在水平 (分类或 “X”) 轴的下方, 在 “垂直” (值或 “Y”) 轴旁边, 在 “竖坐标轴” (在三维
- word表格行高怎么调整?经常在编辑Word表格的时候,遇到很多表格问题,真难!今天给大家分享下表格中调整行高的这个问题。1.选中表格,进入
- 很多事情有了第一次之后,便会顺利很多。比如我们在使用win10过程中,需要在记事本里码字保存,但却不懂得在哪打开。跟随底下的教程,教你几个打
- 我们有时会发现在wps表格里的排序有问题,应该如何解决这种问题呢?下面就让小编告诉你 wps解决表格排序错误的方法。wps解决表格排序错误的
- 我们常常看到一张表格里会出现一个或多个的折线图,那么,表格里的折线图是如何绘制的呢?下面就让小编告诉你绘制wps表格折线图 的方法。绘制wp