ソースファイルを表示
win/sample/win.htm
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1" />
<title>ウィンドウ表示</title>
<link rel="stylesheet" charset="UTF-8" href="win.css" />
<script type="text/javascript" charset="UTF-8" src="win.js"></script>
<style type="text/css">
#root { /* ルート要素 */
position: absolute;
top:0; left:0; right:0; bottom:0;
margin: 0px; padding: 0px;
}
#w-win-wMain { /* メインウィンドウ領域 */
background: #ffefdf;
}
#wMain { /* メインウィンドウ */
padding: 3px;
}
#w-win-wSub1 { /* 左上サブウィンドウ領域 */
background: #dfdfff;
}
#wSub1 { /* 左上サブウィンドウ */
padding: 3px;
}
#w-win-wSub2 { /* 右下サブウィンドウ領域 */
background: #dfefff;
}
#wSub2 { /* 右下サブウィンドウ */
padding: 3px;
}
.wMenu { /* プルダウンメニュー */
position: absolute;
top: 12px; left: 12px;
}
.wLbl {
position: absolute;
top: 12px; left: 54px;
}
.wBtn {
position: absolute;
bottom: 12px; left: 12px;
}
.wTool { /* ツールボックス */
position: absolute;
top: 12px; right: 12px;
flex-direction: row;
}
h2 {
margin: 0px; padding: 5px 0px;
width: 100%;
font-size: 20px;
text-align: center;
}
p {
margin: 0px; padding: 6px 8px;
text-align: center;
}
</style>
<script type="text/javascript" charset="UTF-8">
var wMain = null; // メインウィンドウクラス
var wSub1 = null; // 左上サブウィンドウクラス1
var wSub2 = null; // 右下サブウィンドウクラス2
var wMenu = null; // 左上メニューボタン
var wLbl = null; // 左上ラベル
var wBtn = null; // 左下ボタン
var wTool = null; // 右上ツールボックス
function init() { // 初期処理
wMain = W.mainWin('wMain', 'root');
wMain.win.innerHTML = '<h2>メインウィンドウ</h2>';
wMain.win.innerHTML += '<p>メインウィンドウは、常に表示されている画面です。</p>';
wMain.removeCB = function() { // メインウィンドウ削除時の処理
console.log(this.id + '.remove:');
wMain = null; // メインウィンドウクラス
}
wMain.resizeCB = function(entry) { // メインウィンドウサイズ変更時の処理
console.log(this.id + '.resize: w=' + Math.floor(entry.contentRect.width)
+ ' h=' + Math.floor(entry.contentRect.height));
}
wMain.keydownCB = function(event) { // キーボード入力時の処理
alert(this.id + '.keydown: key=' + event.keyCode);
}
let menu31 = [ // サブメニュー51定義
{txt: '項目311', cmd: 'cmd311', opt: 'opt311'},
{txt: '項目312', cmd: 'cmd312', opt: 'opt312'}
];
let menu3 = [ // サブメニュー5定義
{txt: '項目31 ＞', menu: menu31},
{txt: '項目32', cmd: 'cmd32', opt: 'opt32'},
{txt: '項目33', cmd: 'cmd33', opt: 'opt33'}
];
let menu2 = [ // サブメニュー3定義
{txt: '項目21', cmd: 'cmd21', opt: 'opt21'},
{txt: '項目22', cmd: 'cmd22', opt: 'opt22'}
];
let menu = [ // メニュー定義
{txt: '項目1', cmd: 'cmd1', opt: 'opt1'},
{txt: '項目2 ＞', menu: menu2},
{txt: '項目3 ＞', menu: menu3}
];
wMenu = wMain.addMenu({menu: menu, func: function() { // 左側のメニューを登録
let win = W.getElemWin(this);
let cmd = this.getAttribute('w-cmd');
let opt = this.getAttribute('w-opt');
alert(win.id + ".menu: " + cmd + ", " + opt);
}});
wMenu.classList.add('wMenu');
wLbl = wMain.addLbl('ラベル');
wLbl.classList.add('wLbl');
wBtn = wMain.addBtn({ // 左下ボタン処理
icon: 'str2',
str: 'DLG',
func: function(e) {
let wDlg = W.dialog('ダイアログ');
wDlg.win.innerHTML = '<p>ダイアログは、画面を占有してメッセージを表示します。</p>';
}
});
wBtn.classList.add('wBtn');
let toolbox = [{ // ツールボックスメニュー処理
icon: 'str2',
str: '左上',
func: function(e) {
if (wSub1 == null) { // サブウィンドウを表示
wSub1 = W.subWin('wSub1', wMain, {order: -1});
wSub1.win.innerHTML = '<h2>サブウィンドウ1</h2>';
wSub1.win.innerHTML += '<p>サブウィンドウは、自由に表示消去ができる画面です。</p>';
wSub1.removeCB = function() { // サブウィンドウ削除時の処理
console.log(this.id + '.remove:');
wSub1 = null;
}
wSub1.resizeCB = function(entry) { // サブウィンドウサイズ変更時の処理
console.log(this.id + '.resize: w=' + Math.floor(entry.contentRect.width)
+ ' h=' + Math.floor(entry.contentRect.height));
}
wSub1.keydownCB = function(event) { // キーボード入力時の処理
alert(this.id + '.keydown: key=' + event.keyCode);
}
} else { // サブウィンドウを削除
wSub1.remove();
}
}
},{
icon: 'str2',
str: '右下',
func: function(e) {
if (wSub2 == null) { // サブウィンドウを表示
wSub2 = W.subWin('wSub2', wMain);
wSub2.win.innerHTML = '<h2>サブウィンドウ2</h2>';
wSub2.win.innerHTML += '<p>サブウィンドウは、自由に表示消去ができる画面です。</p>';
wSub2.removeCB = function() { // サブウィンドウ削除時の処理
console.log(this.id + '.remove:');
wSub2 = null;
}
wSub2.resizeCB = function(entry) { // サブウィンドウサイズ変更時の処理
console.log(this.id + '.resize: w=' + Math.floor(entry.contentRect.width)
+ ' h=' + Math.floor(entry.contentRect.height));
}
wSub2.keydownCB = function(event) { // キーボード入力時の処理
alert(this.id + '.keydown: key=' + event.keyCode);
}
} else { // サブウィンドウを削除
wSub2.remove();
}
}
},{
icon: 'str2',
str: '初期',
func: function(e) {
term(); // 終了処理
init(); // 初期処理
}
}];
wTool = wMain.addToolbox(toolbox); // 右側のツールボックスを登録
wTool.classList.add('wTool');
}
function term() { // 終了処理
if (wSub1 != null) wSub1.remove();
if (wSub2 != null) wSub2.remove();
wMain.remove();
}
</script>
</head>
<body onload="init()">
<div id="root"></div>
</body>
</html>