NODE-WEBKIT教程(12)全屏

2024-04-06 18:04:28

node-webkit教程(12)全屏

文/玄魂

目录

node-webkit教程(12)全屏

前言

12.1 和全屏有关的三个api

Window.enterFullscreen()

Window.leaveFullscreen()

Window.toggleFullscreen()

11.2 示例

11.3 小结

前言

最近node-webkit新增了fullScreen和widow notification的api，本篇文章主要简单演示下fullScreen Api的效果。

12.1 和全屏有关的三个API

Window.enterFullscreen()

该api使整个窗口进入全屏状态。

Window.leaveFullscreen()

使窗口退出全屏状态。

Window.toggleFullscreen()

逆转窗口的全屏状态。

11.2 示例

新建fullscreenhtml和package.json文件。

fullscreen.html 内容如下：

<html>

<head>

<title>玄魂测试node-webkit 全屏api</title>

<meta charset="gbk" />

</head>

<body >

<button id="full"> 全屏</button>

<button id="exitFull">退出全屏</button>

<div>

</div>

<script>

var gui = require('nw.gui');

var win = gui.Window.get();

var fullBt = document.querySelector('#full');

fullBt.addEventListener("click", function (evt) {

win.enterFullscreen();

}, false);

var exitBt = document.querySelector('#exitFull');

exitBt.addEventListener("click", function (evt) {

win.leaveFullscreen();

}, false);

</script>

</body>

</html>

package.json内容如下：

{

"name": "nw-demo",

"main": "fullscreen.html",

"nodejs":true,

"window": {

"title": "全屏api测试",

"toolbar": true,

"width": 300,

"height": 200,

"resizable":true,

"show_in_taskbar":true,

"frame":true,

"kiosk":false

},

"webkit":{

"plugin":true

}

}

代码很简单，分别绑定了两个button的事件，用来全屏和退出全屏。

页面启动时效果如下：

点击全屏时效果如下：

点击退出全屏时效果如下：

11.3 小结

本文内容主要参考node-webkit的官方英文文档，做了适当的调整（https://github.com/rogerwang/node-webkit/wiki/Window）。

鄙视不标明出处的转载，更多相关内容，欢迎访问玄魂的博客（www.xuanhun521.com）

更多相关内容，欢迎访问玄魂的博客(更多node-webkit相关内容 http://www.xuanhun521.com/Blog/Tag/node-webkit)

ps：nw.js，electron交流群 313717550

本文转自玄魂博客园博客，原文链接：http://www.cnblogs.com/xuanhun/p/3894272.html，如需转载请自行联系原作者

NODE-WEBKIT教程(12)全屏相关推荐

vmware mac安装教程 | 不能全屏的终极原因
问题及解决方案嗨,你好,相信你也遇到了不能全屏的情况了! 小编这里,解决的方案就是这样,希望对你有用! 前言突然想体验一下mac操作系统,还在学校的我真不能直接买一个macbook pro,因此还 ...
CAD建筑制图教程之全屏编辑
使用过浩辰CAD建筑软件进行绘图的朋友都知道,浩辰CAD建筑软件中有很多关于CAD建筑制图的命令,在界面上显示出来的也很多,这对于CAD制图初学入门的小伙伴是很有帮助的,但是对于一些熟练掌握的人来说作 ...
【制作ppt的软件】Focusky教程 | 视频全屏播放
(Focusky动画演示大师简称为"FS软件")首先,要使路径比例跟电脑的显示屏比例一致,才能保证帧里的内容能够全屏播放. 故在设计内容前,可根据电脑显示屏的比例来选择合适的显示比 ...
Html手机web背景全屏,使用全屏背景的网页设计欣赏全屏网页背景教程
使用全屏背景的网页设计欣赏 & 全屏网页背景教程 Sponsor 全屏的大背景网站之前分享过不少,这是2012年以及2013年的设计趋势,适合用全屏背景的网站有很多,比如摄影类.建筑类.餐厅美 ...
C#窗体程序实现全屏及取消全屏步骤
这篇文章主要介绍了C#窗体程序实现全屏及取消全屏步骤,具有很好的参考价值,希望对大家有所帮助.一起跟随小编过来看看吧由于项目需要,需要用vs窗体程序实现播放视频的窗口的全屏和取消全屏. 具体实现界面 ...
h5 api-多浏览器之全屏、关闭全屏、检测是否全屏
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...
Codrops 优秀教程：基于 CSS3 的全屏网页过渡特效
向大家分享一个来自 Codrops 的基于 CSS3 实现的全屏网页过渡特效.页面初始布局是四个盒子,点击其中一个会扩张到全屏,其它的会淡出隐藏:关闭当前视图的时候又恢复到初始状态. 您可能感兴趣的相 ...
cf不能全屏win7的解决方法_win10玩cf不能全屏的解决方法教程
方法一. 1.首先登录穿越火线,选择服务器后,点击右上角的小扳手的按钮(也就是设置按钮),记下正在使用的分辨率.一般使用的分辨率是1024×760. 2.退出游戏,右击桌面的空白处,选择显示设置. 3 ...
苹果cmsV10添加全屏幻灯图、全屏轮播图教程
使用全屏模板的小伙伴们很多都不会把首页的幻灯图片设置成全屏显示,今天就给大家讲解下幻灯图片全屏的设置教程. 1,设置全屏有2种途径:A是直接上传全屏的图片,B是通过苹果cms系统后台编辑视频的&quo ...

最新文章

热门文章