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 的按钮文本是退出全屏模式。

Axure 教程,如何在 Axure 中使用 JavaScript 实现浏览器全屏模式?



点击「进入/退出全屏模式」动态面板状态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);

Axure 教程,如何在 Axure 中使用 JavaScript 实现浏览器全屏模式?

点击「进入/退出全屏模式」动态面板状态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}"); } } }; 退出全();

Axure 教程,如何在 Axure 中使用 JavaScript 实现浏览器全屏模式?

这样就完成了所有的设置。



标签:苹果,mac,Axure,教程,Axure
0
投稿

猜你喜欢

  • 如何快速更新体验苹果iOS11Beta1?

    2022-08-07 10:10:16
  • excel工作簿拆分实现VBA代码

    2023-03-05 03:50:25
  • iOS 14 正式版上线时间公布,官方上线全新介绍

    2023-12-01 12:50:56
  • 如何解决win10系统的日志文件过大的问题?

    2023-08-09 09:07:39
  • Win10笔记本电脑怎么连接WiFi?

    2023-05-14 03:49:07
  • wps表格如何使用条件格式

    2023-01-22 03:41:18
  • 如何使用DAVERAGE函数计算Excel表格中满足条件的平均值

    2023-04-03 23:33:55
  • excel怎么让单元格填满某个字符 excel让单元格填满某个字符方法

    2022-01-15 11:30:17
  • Excel使用COUNT函数统计满足条件的数量

    2022-12-09 12:11:32
  • 在WPS演示中如何利用创建播放器方式插入flash

    2022-12-20 18:55:11
  • ​Excel中打字是竖着排列的如何变成横的

    2022-08-31 02:09:52
  • 论文wps或word中同样的单倍行距效果不一样方法介绍

    2022-07-17 07:53:21
  • wps文字如何加水印图文教程

    2022-08-06 15:28:35
  • Word 15变身阅读器:增书签且兼容PDF

    2022-06-08 12:54:12
  • 如何在Excel2016表格中快速自动填充一列

    2023-09-13 00:13:35
  • 如何在Microsoft Excel中插入超链接

    2022-11-03 00:18:10
  • excel表格记忆输入功能的使用教程

    2023-02-09 09:13:23
  • 用Excel2003做九九乘法表的方法

    2022-06-10 01:27:37
  • wps如何将图片设置页面背景

    2022-08-04 10:16:30
  • Excel ODD 函数介绍及实例教程

    2022-05-23 21:09:24
  • asp之家 电脑教程 m.aspxhome.com