丰富的HTML托盘菜单

Question

我想创建一个自定义按钮，滑块，也许有些很好的过渡效果，页眉和页脚这样的托盘菜单应用：

的应用需要在Linux，Windows和Mac上工作。 我猜想它应该可以与桌面web应用程序+一些HTML，但我找不到任何框架的任何有用的例子。每个例子都使用操作系统的菜单，但没有我需要的元素。

任何人都可以指导我如何在任何Web应用程序框架中实现或多或少？

Answer 1

这可以在电子做很容易，其实我已经创建了几个托盘应用程式自己在下面的图片：

这里是概括到底该怎么做一个帖子： http://www.bytcode.com/articles/1

您所需要的最基本的文件是：

• 的index.html
• main.js
• 的package.json

在你希望它看起来index.html你设计你的应用程序的方式。在我上面的示例中，我只使用了几个输入框，并使用CSS对其进行了样式设置。

在main.js文件是你的主要代码将启动应用程序的地方。

在package.json文件是你把你的应用程序的细节，开发的依赖等

你应该关注的主要文件是main.js文件。以下是上述应用的main.js文件示例。我添加了注释，以帮助您了解：

// Sets variables (const) 
const {app, BrowserWindow, ipcMain, Tray} = require('electron') 
const path = require('path') 

const assetsDirectory = path.join(__dirname, 'img') 

let tray = undefined 
let window = undefined 

// Don't show the app in the doc 
app.dock.hide() 

// Creates tray & window 
app.on('ready',() => { 
    createTray() 
    createWindow() 
}) 

// Quit the app when the window is closed 
app.on('window-all-closed',() => { 
    app.quit() 
}) 

// Creates tray image & toggles window on click 
const createTray =() => { 
    tray = new Tray(path.join(assetsDirectory, 'icon.png')) 
    tray.on('click', function (event) { 
    toggleWindow() 
    }) 
} 

    const getWindowPosition =() => { 
    const windowBounds = window.getBounds() 
    const trayBounds = tray.getBounds() 

    // Center window horizontally below the tray icon 
    const x = Math.round(trayBounds.x + (trayBounds.width/2) - (windowBounds.width/2)) 

    // Position window 4 pixels vertically below the tray icon 
    const y = Math.round(trayBounds.y + trayBounds.height + 3) 

    return {x: x, y: y} 
} 

// Creates window & specifies its values 
const createWindow =() => { 
    window = new BrowserWindow({ 
     width: 250, 
     height: 310, 
     show: false, 
     frame: false, 
     fullscreenable: false, 
     resizable: false, 
     transparent: true, 
     'node-integration': false 
    }) 
    // This is where the index.html file is loaded into the window 
    window.loadURL('file://' + __dirname + '/index.html'); 

    // Hide the window when it loses focus 
    window.on('blur',() => { 
    if (!window.webContents.isDevToolsOpened()) { 
     window.hide() 
    } 
    }) 
} 

const toggleWindow =() => { 
    if (window.isVisible()) { 
    window.hide() 
    } else { 
    showWindow() 
    } 
} 

const showWindow =() => { 
    const position = getWindowPosition() 
    window.setPosition(position.x, position.y, false) 
    window.show() 
    window.focus() 
} 

ipcMain.on('show-window',() => { 
    showWindow() 
}) 

下面是package.json文件的例子：

{ 
    "name": "NAMEOFAPP", 
    "description": "DESCRIPTION OF APP", 
    "version": "0.1.0", 
    "main": "main.js", 
    "license": "MIT", 
    "author": "NAME OF AUTHOR", 
    "scripts": { 
    "start": "electron ." 
    }, 
    "devDependencies": { 
    "electron-packager": "^8.2.0" 
    } 
} 

所以，如果你创建一个简单的index.html文件说的Hello World，将上面的代码分别装入main.js文件和package.json文件并运行它将从托盘运行的应用程序。

如果你不知道如何使用电子，你需要首先弄清楚（它不那么难以掌握）。然后，它会变得不清楚的地方放置什么文件，以及如何运行应用程序

这可能看起来有点复杂，并为更多的细节，你可以阅读docs