电脑教程
位置:首页>> 电脑教程>> 苹果Mac教程>> Axure 教程,如何在 Axure 中使用 JavaScript 实现浏览器全屏模式?

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

  发布时间:2022-12-27 20:26:35 

标签:苹果,mac,Axure,教程,Axure

欢迎观看 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 实现浏览器全屏模式?

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



0
投稿

猜你喜欢

手机版 电脑教程 asp之家 www.aspxhome.com