首页 > 代码库 > 三个基本功能：新建窗口、关闭窗口和全屏控制

三个基本功能：新建窗口、关闭窗口和全屏控制

2024-09-03 13:51:32   214人阅读

共两个文件，index.html和setting.html

下面是index.html的代码：

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 <html lang="en">
 3 
 4 <head>
 5     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 6     <title>fonty - amazing font tool for designers.</title>
 7     <link rel="stylesheet" href="css/main.css">
 8 </head>
 9 <script>
10 //实时预览
11 var gulp = require(‘gulp‘);  
12    gulp.task(‘reload‘, function () {  
13      if (location) location.reload();  
14    });  
15   
16    gulp.watch(‘**/*‘, [‘reload‘]); 
17 
18   var gui = require(‘nw.gui‘);
19   mainWindow = gui.Window.get();
20   
21   var newwin = function (){
22     window.open(‘setting.html‘);
23   }
24   mainWindow.on(‘close‘, function() {
25   gui.App.closeAllWindows();
26   this.close(true);
27 });
28 </script>
29 
30 <body>
31 <div id="maincontent">
32     <div id="leftbar">
33         <div class="logo"><img src="images/logo.png" alt=""></div>
34     </div>
35     <div id="rightbar"><a href="#" onclick="newwin()">new window</a></div>
36   </div>
37 </body>
38 
39 </html>


然后是setting.html的代码：

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 <html lang="en">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 5     <title>setting</title>
 6 </head>
 7 <script>
 8 var gui = require(‘nw.gui‘);
 9 var currentWindow = gui.Window.get();
10 currentWindow.on(‘enter-fullscreen‘, function () {
11 console.log(‘Windows has entered fullscreen mode‘);
12 });
13 currentWindow.on(‘leave-fullscreen‘, function () {
14 console.log(‘Windows has left fullscreen mode‘);
15 });
16 </script>
17 <body>
18     <a href="#" onclick="currentWindow.toggleFullscreen()">Toggle
19 Fullscreen</a><br>
20 <a href="#" onclick="currentWindow.close()">Close</a>
21 </body>
22 </html>

这里应该不用注释了，因为太简单了。

不过要说明的是，index.html里有关gulp的部分，是为了在sublime text中实现实时预览添加的代码，方便调试用。

三个基本功能：新建窗口、关闭窗口和全屏控制


联系
我们