NODE-WEBKIT教程(12)全屏
node-webkit教程(12)全屏
文/玄魂
目录
node-webkit教程(12)全屏
前言
最近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
NODE-WEBKIT教程(12)全屏的更多相关文章
- Adobe Flex迷你教程 —Flex4全屏显示
应用场景 1.播放器 我们经常看视频的时候,需要全屏显示,(在flex中这个视频初始化的时候是嵌入到html的iframe中). 2.监控 如下图所示,大多时候我们的监控用的是flex,而树形菜单和标 ...
- Node入门教程(12)第十章：Node的HTTP模块
Ryan Dahl开发node的初衷就是:把Nginx非阻塞IO功能和一个高度封装的WEB服务器结合在一起的东东.所以Node初衷就是为了高性能的Web服务器去的,所以:Node的HTTP模块也是核心 ...
- Directx11教程(12) 禁止alt+enter全屏窗口
原文:Directx11教程(12) 禁止alt+enter全屏窗口 在D3D11应用程序中,我们按下alt+enter键,会切换到全屏模式.有时候,我们在WM_SIZE中有一些代码,全 ...
- [整理]Node入门 » 一本全面的Node.js教程 - Demo实践所遇到的问题
花了一个上午看完[转载]Node入门 » 一本全面的Node.js教程 根据里面的Demo自己手动实现过程中还是遇到了些问题,特整理在此. <1>.由于node.msi安装包已经自动添加了 ...
- 虚拟机VMWare安装苹果系统MacOS详细教程（联网设置，全屏插件、文件互传）
运行环境: VMware® Workstation 12 Pro(自行安装,或者用这个) 推荐(下面以10.11.6版本做的教程,但是安装时推荐使用此版本安装然后升级到10.11.6):MacOS X ...
- NeHe OpenGL教程 第四十六课：全屏反走样
转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...
- Win10玩魔兽争霸不能全屏显示的设置教程
Win10玩魔兽争霸不能全屏显示的设置教程: 1.右击桌面左下角的windows图标,显示图片内容,然后点击运行: 2.点击运行,有个输入框,输入regedit,点击确认: 3.显示win10注册表, ...
- jquery.fullPage.js全屏滚动插件教程演示
css部分(此处需要导入jquery.fullPage.css) <style> .section { text-align: center; font: 50px "Micro ...
- 《Genesis-3D开源游戏引擎完整实例教程-2D射击游戏篇07：全屏炸弹》
7.全屏炸弹 全屏炸弹概述: 为了增设游戏的趣味性,我们制作一个游戏的基本框架以外.还会增设一些其他的额外的功能.比如5秒无敌状态.冰冻效果等.下面咱们以消灭屏幕中所有炸弹为例,看除了碰撞可以触发事件 ...
随机推荐
- Lambda 表达式的基本形式
基本形式: (input parameters) => expression 其中:运算符“=>”读作“goes to”. 例如: () => 5 * 3; (x) => x ...
- python(第五步django)
这是一个关于,web开发的库, 下一步需要重点掌握的是,网页跳转和数据展示,和面向对象的关系的重用的内容 1:目前掌握的是project 的创建,和app的创建, 2:
- 循序渐进Python3（三） -- 2 -- 内置函数
上一篇我们介绍了21个最常用到的函数,简单列一下,帮助回忆巩固: 1.abs 2.dict 3.float 4.help 5.input 6.int 7.len 8.list 9.max 10.min ...
- Visual Studio 必备神器
会使用工具是人类文明的一大进步,今天敏捷大行其道,好的工具可以大大的提高生产力,这里说的工具都是VS平台上的扩展工具,一些机械的部分可以交给工具去处理,自己多关注其他部分.下面分享下我觉得不错的工具, ...
- Xcode升级插件失效，与添加插件不小心点击Skip Bundle解决办法
一.当发现升级xcode后,插件不能使用,解决办法如下: 1.查看Xcode的UUID 在终端执行 defaults read /Applications/Xcode.app/Contents/Inf ...
- 使用Intellij idea开发
使用IntelliJ IDEA开发SpringMVC网站(一)开发环境 使用IntelliJ IDEA开发SpringMVC网站(二)框架配置 使用IntelliJ IDEA开发SpringMVC网站 ...
- Linux命令（1）- grep
1.grep 功能:查找文件里符合条件的字符串. 语法:grep [-abcEFGhHilLnqrsvVwxy][-A<显示列数>][-B<显示列数>][-C<显示列数& ...
- 【html/css】html/css命名规范
无论做什么,规则总是最重要的.无规矩不成方圆,有了规矩,我们才能有规可循,有则可依,人与人之间才能正常的交流交往. 人人都有自己的命名习惯,不过,代码是需要交流的,当有些命名习惯仅只自己能看懂,甚至自 ...
- sublime txt 设置在浏览器预览
1. 安装SideBarEnhancements插件 ctrl+shift+p —> Install Package —> 找到SideBarEnhancements 2. 配置预览快捷键 ...
- 关于php中正则匹配包括换行符在内的任意字符的问题总结
要使用正则匹配任意字符的话,通常有以下几种方法,这里我分别对每一种方法在使用的过程中做一个总结: 第一种方式:[.\n]*? 示例 ? PHP preg_match_all('/<div cla ...