Я новичок в электрон. js. Я пытался создать окно, которое имеет боковую панель / страницу по умолчанию, и я пытаюсь просмотреть отдельные windows при нажатии левой кнопки. Я много искал, но единственное, что я нашел, это как создать несколько windows.
ИЗОБРАЖЕНИЕ:
КОД
app.on('ready', function () {
// Create new window
mainWindow = new BrowserWindow({});
// Load html in window
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
// pathname: path.join(__dirname, './layouts/settings.html'),
protocol: 'file:',
slashes: false
}));
// // Quit app when closed
mainWindow.on('closed', function () {
app.quit();
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Shop Flow Sync Tool</title>
<!-- Bootstrap -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div style="margin-top:15px" class="container">
<div class="row">
<div class="col-xs-3">
<a class="btn btn-info btn-sm btn-block" href="#" id="menu-btn-settings" role="button">Settings</a>
<a class="btn btn-info btn-sm btn-block" href="#" id="menu-btn-health" role="button">aaa</a>
<a class="btn btn-info btn-sm btn-block" href="#" id="menu-btn-sync-now" role="button">bbb</a>
<a class="btn btn-info btn-sm btn-block" href="#" id="menu-btn-sync-user" role="button">ccc</a>
<a class="btn btn-info btn-sm btn-block" href="#" id="menu-btn-about" role="button">About</a>
</div>
<div class="col-xs-9">
<div id="alert-msg"></div>
<div id="content"></div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script>window.$ = window.jQuery = require('./assets/js/jquery.min.js');</script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/jquery.helpers.js"></script>
<script src="app/app.js"></script>
</body>
</html>