NODE-WEBKIT教程(5)NATIVE UI API 之FRAMELESS WINDOW
文/玄魂javascript
幾個月前，要開發一個簡易的展現應用，要求支持離線播放（桌面應用）和在線播放（web應用）。html5
當時第一想到的是flex，同一套代碼（或者只需少許的更改）就能夠同時運行在桌面和瀏覽器上。因爲不少展示效果要全新開發，我想到了impress.js(https://github.com/bartaz/impress.js/)。若是選擇impress.js，就意味着要將html5做爲桌面應用，當時想到要封裝webkit，可是本人對這方面也不是很熟悉，時間也頗有限，就又沿着這個方向搜索，找到了node-webkit(https://github.com/rogerwang/node-webkit)。java
node-webkit解決了我經過html和js來編寫桌面應用的難題。node
至於node-webkit的定義，按照做者的說法：ios
「 基於node.js和chromium的應用程序實時運行環境，可運行經過HTML(5)、CSS(3)、Javascript來編寫的本地應用程序。node.js和webkit的結合體，webkit提供DOM操做，node.js提供本地化操做；且將兩者的context徹底整合，可在HTML代碼中直接使用node.js的API。」git
Frameless window，是沒有操做系統默認樣式的邊框的窗口，也就意味着最大、最小和關閉按鈕也訪問不到，同時默認狀況下窗口不能被拖拽。github
在node webkit學習(2)基本結構和配置(http://www.xuanhun521.com/Blog/2014/4/10/node-webkit%E5%AD%A6%E4%B9%A02%E5%9F%BA%E6%9C%AC%E7%BB%93%E6%9E%84%E5%92%8C%E9%85%8D%E7%BD%AE)一文中，介紹frame屬性時，給出了一個簡單示例，本篇文章以該示例爲基礎進行擴展。web
Frameless window的使用場景，一般是咱們須要自定義標題欄，窗口邊框樣式和按鈕的時候。json
首先建立示例程序文件，framelessDemo.html和package.json。
framelessDemo.html代碼以下：
<html>
<head>
<title>frame less windowdemo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body >
<h1>frameless window 測試</h1>
<script>
var gui = require('nw.gui');
</script>
</body>
</html>
package.json內容以下：
{
"name": "framelessWindow-demo",
"main": "framelessDemo.html",
"nodejs":true,
"window": {
"title": " framelessWindow-demo ",
"toolbar": true,
"width": 800,
"height": 600,
"resizable":true,
"show_in_taskbar":true,
"frame":false,
"kiosk":false
},
"webkit":{
"plugin":true
}
}
運行程序，效果以下：
此時窗口無邊框，無標題欄，不能拖拽。
5.2 如何啓用無邊框窗口
鄙視不標明出處的轉載，更多相關內容，歡迎訪問玄魂的博客（www.xuanhun521.com）
注意package.json中window的配置，將字段frame設置爲false便可。
{
"window": {
"frame": false
}
}
5.3 窗口拖拽
默認狀況下，無框窗口是不可拖拽的，能夠經過給body添加「-webkit-app-region: drag」樣式，來啓用拖拽。
若是在body上設置了拖拽，須要在button上去除拖拽，不然按鈕沒法點擊，添加以下樣式：
若是你僅僅使用自定義titlebar組件，也須要設置在titlebar中的按鈕no-drag。
5.4 窗口操做
鄙視不標明出處的轉載，更多相關內容，歡迎訪問玄魂的博客（www.xuanhun521.com）
在無框窗口中，咱們仍然須要使用戶可以進行最大、最小，關閉窗口等操做。
首先咱們可使用javascript中的window對象來關閉窗口。
由於node-webkit有window對象，使用window api是咱們的首選，詳見：node-webkit學習(4)Native UI API 之window（http://www.xuanhun521.com/Blog/2014/4/14/node-webkit%E5%AD%A6%E4%B9%A04native-ui-api-%E4%B9%8Bwindow）
5.5 推薦demo
demo地址：https://github.com/zcbenz/nw-sample-apps/tree/master/frameless-window。
這個示例演示了使用frameless window時，如何自定義實現全部標準窗口的功能。
本文內容主要參考node-webkit的官方英文文檔（https://github.com/rogerwang/node-webkit/wiki/Frameless-window）。
下一篇文章，介紹menu。
鄙視不標明出處的轉載，更多相關內容，歡迎訪問玄魂的博客（www.xuanhun521.com）
更多相關內容，歡迎訪問玄魂的博客(更多node-webkit相關內容 http://www.xuanhun521.com/Blog/Tag/node-webkit)
ps：nw.js，electron交流羣 313717550
- 1. node-webkit學習(4)Native UI API 之window
- 2. NODE-WEBKIT教程(6)NATIVE UI API 之MENU(菜單)
- 3. NodeWebkit Windows下一鍵打包
- 4. Window API譯文
- 5. 三 Flink window API
- 6. node-webkit學習(3)Native UI API概覽
- 7. 03-Flink window API
- 8. JavaFX UI控件教程（二）之JavaFX UI控件
- 9. MySql5.6 Window安裝教程
- 10. MySQL8(Window)安裝教程
- 更多相關文章...
- • ionic 教程 - ionic 教程
- • SQLite 教程 - SQLite教程
- • Java 8 Stream 教程
- • Github 簡明教程
-
每一个你不满意的现在，都有一个你没有努力的曾经。