NODE-WEBKIT教程(12)全屏
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)全屏的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 小球大作战-搜索优化
- 下一篇： 【云中沙箱】如何快速使用阿里云快速搭建论