ソースファイルを表示
win/sample/win2.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">
div#root {
position: absolute;
top:0; left:0; right:0; bottom:0;
}
#w-win-wWin1 { /* 左上画面（メイン） */
background: #e7f7e7;
}
#w-win-wWin2 { /* 右下画面（サブ） */
background: #e7f7e7;
flex: 1 1 50px;
}
.wMenu { /* プルダウンメニュー */
position: absolute;
top: 12px; left: 12px;
}
.wTool { /* ツールボックス */
position: absolute;
top: 12px; right: 12px;
}
h2 {
margin: 0px; padding: 14px 0px 6px 0px;
width: 100%;
font-size: 20px;
text-align: center;
}
p {
margin: 0px; padding: 6px 8px;
}
</style>
<script type="text/javascript" charset="UTF-8">
var wWin1; // 左上画面（メイン）
var wWin2; // 右下画面（サブ）
var myWin1; // 左上画面（メイン）のウィンドウ
var myWin2; // 右下画面（サブ）のウィンドウ
function init() { // 初期処理
wWin1 = W.mainWin('wWin1', 'root');
wWin2 = W.subWin('wWin2', wWin1, {closeBtn: 'off'});
myWin1 = myWin('myWin1', 'wWin1');
myWin2 = myWin('myWin2', 'wWin2');
}
var menu31 = [ // サブメニュー51定義
{txt: '項目311', cmd: 'cmd311', opt: 'opt311'},
{txt: '項目312', cmd: 'cmd312', opt: 'opt312'}
];
var menu3 = [ // サブメニュー5定義
{txt: '項目31 ＞', menu: menu31},
{txt: '項目32', cmd: 'cmd32', opt: 'opt32'},
{txt: '項目33', cmd: 'cmd33', opt: 'opt33'}
];
var menu2 = [ // サブメニュー3定義
{txt: '項目21', cmd: 'cmd21', opt: 'opt21'},
{txt: '項目22', cmd: 'cmd22', opt: 'opt22'}
];
var menu = [ // メニュー定義
{txt: '項目1', cmd: 'cmd1', opt: 'opt1'},
{txt: '項目2 ＞', menu: menu2},
{txt: '項目3 ＞', menu: menu3}
];
function keydownCB(event) { // キーボード入力時の処理
alert(this.id + '.keydown: key=' + event.keyCode);
}
function menuCB() { // メニュー選択時の処理
let win = W.getElemWin(this);
let cmd = this.getAttribute('w-cmd');
let opt = this.getAttribute('w-opt');
alert(win.id + ".menu: " + cmd + ", " + opt);
}
var toolMenu = [{ // ツールボックスメニュー処理
icon: 'str2',
str: 'サブ',
func: function(e) {
let win = W.getElemWin(this);
win.dispSub();
}
},{
icon: 'str2',
str: 'DLG',
func: function(e) {
let wDlg = W.dialog('ダイアログ');
wDlg.win.innerHTML = '<p>ダイアログは、画面を占有してメッセージを表示します。</p>';
}
}];
class MyWin extends W.MainWin { // 拡張ウィンドウクラス
sub = null;
constructor(id, pid, opt={}) {
super(id, pid, opt);
this.win.innerHTML = '<h2>メイン (' + this.win.id + ')</h2>';
this.keydownCB = keydownCB; // キーボード入力時の処理
let wMenu = this.addMenu({menu: menu, func: menuCB}); // 左側のメニューを登録
wMenu.classList.add('wMenu');
let wTool = this.addToolbox(toolMenu); // 右側のツールボックスを登録
wTool.classList.add('wTool');
}
dispSub() {
if (this.sub == null) { // リストを表示
let id = this.id + 'Sub';
this.sub = mySub(id, this);
} else { // リストを消去
this.sub.remove();
this.sub = null;
}
}
}
myWin = function(id, pid, opt={}) { // 小文字で始まるショートカットの定義
return new MyWin(id, pid, opt);
}
MySub = class extends W.SubWin { // サブウィンドウ表示クラス
constructor(id, main, opt={}) {
super(id, main, opt);
this.win.innerHTML = '<h2>サブ (' + this.win.id + ')</h2>';
this.keydownCB = keydownCB; // キーボード入力時の処理
}
}
mySub = function(id, main, opt={}) { // 小文字で始まるショートカットの定義
return new MySub(id, main, opt);
}
</script>
</head>
<body onload="init()">
<div id="root"></div>
</body>
</html>