NODE-WEBKIT教程(12)全屏
2014-08-06 12:30
441 查看
node-webkit教程(12)全屏
文/玄魂目录
node-webkit教程(12)全屏... 1
前言... 1
12.1 和全屏有关的三个api1
Window.enterFullscreen()1
Window.leaveFullscreen()1
Window.toggleFullscreen()1
11.2 示例... 1
11.3 小结... 1
前言
最近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)全屏
- node-webkit使用教程
- node-webkit 使用教程
- node-webkit教程(9)native api 之Tray(托盘)
- node-webkit教程<>Native UI API 之Menu(菜单)
- node-webkit教程(16)调试typescript
- Directx11教程(12) 禁止alt+enter全屏窗口
- node-webkit教程(10)Platform Service之File dialogs
- nw.js node-webkit系列(12)Native UI API File dialogs的使用
- NODE-WEBKIT教程(5)NATIVE UI API 之FRAMELESS WINDOW
- node-webkit教程(10)Platform Service之File dialogs
- node-webkit教程(9)native api 之Tray(托盘)
- node-webkit教程(13)gpu支持信息查看
- node-webkit教程(6)Native UI API 之Menu(菜单)
- cocos2d-x CCNode,CCLayer,CCScene分析-沈大海cocos2d-x教程12
- node-webkit教程(8)Platform Service之Clipboard
- node-webkit教程(13)gpu支持信息查看
- node-webkit教程(14)禁用缓存
- Node入门教程(12)第十章:Node的HTTP模块
- node-webkit教程(8)Platform Service之Clipboard